1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > swiper切换 同时更换 背景色

swiper切换 同时更换 背景色

时间:2023-02-08 06:06:12

相关推荐

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的属性进行赋值,赋予不同的背景颜色。

希望对你有所帮助!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。