swiper切换 同时更换 背景色

前言：
最近做一个项目，甲方爸爸展示了一个案例，说轮播图切换的时候，同时背景色也要改变。所以，便写了一个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的属性进行赋值，赋予不同的背景颜色。

希望对你有所帮助！