前言:
最近做一个项目,甲方爸爸展示了一个案例,说轮播图切换的时候,同时背景色也要改变。所以,便写了一个demo。
话不多说,看效果图
直接上代码:
<template><view class="content"><view class="swiper_bg" :style="swiperbg"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" @change="swiperChange"><swiper-item><view class="swiper-item"><image src="../../static/bg1.jpg" mode="" mode="scaleToFill"></image></view></swiper-item><swiper-item><view class="swiper-item"><image src="../../static/bg2.jpg" mode=""></image></view></swiper-item></swiper></view></view></template>
data() {return {swiperIndex:0,swiperbg:'background:'+'yellow'}},methods: {swiperChange(e){this.swiperIndex=e.detail.current;if(this.swiperIndex==0){this.swiperbg='background:'+'yellow'} else {this.swiperbg='background:'+'blue'}}}
重点部分就在于change事件中,通过获取到index的值,来对style的属性进行赋值,赋予不同的背景颜色。
希望对你有所帮助!