微信小程序—轮播图+背景变化

先上效果：

1.轮播图效果

2.背景颜色会随着轮播图变化

代码实现：

HTML:

<view class="tab-list-movie" style="background:{{bgColor[swiperIndex]}}">
    <swiper class="movie-swiper" autoplay interval="3000" circular indicator-dots indicator-active-color="white" bindchange="getSwiperIndex">
        <swiper-item class="swiper-item" wx:for="{{swiperImg}}" wx:key="index">
            <image class="swiper-item-img" mode="heightFix" src="{{item}}" />
        </swiper-item>
    </swiper>
</view>

 JS:

data:{
    //轮播图素材
    swiperImg: [
        "../images/swiper1.jpg",
        "../images/swiper2.jpg",
        "../images/swiper3.jpg",
        "../images/swiper4.jpg"
    ],
    swiperIndex:0,//轮播图索引
    bgColor:[
        "linear-gradient(#33299c,#f1f1f1,#f1f1f1,#f1f1f1)",
        "linear-gradient(#433c36,#f1f1f1,#f1f1f1,#f1f1f1)",
        "linear-gradient(#900b08,#f1f1f1,#f1f1f1,#f1f1f1)",
        "linear-gradient(#eda23c,#f1f1f1,#f1f1f1,#f1f1f1)",
    ],// linear-gradient 渐变色需要四个颜色属性
}

//监听轮播图索引事件
getSwiperIndex(e){
    let currentIndex = e.detail.current
    this.setData({
        swiperIndex:currentIndex
    })
},

.tab-list-movie {
    height: 100vh;
}
.movie-swiper{
    padding-top: 80rpx;
    margin: 0 32rpx;
    height: 200rpx;
}
.swiper-item{
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
}
.swiper-item-img{
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
}

代码展示效果： 

最后

以上就是专注山水为你收集整理的微信小程序—轮播图+背景变化的全部内容，希望文章能够帮你解决微信小程序—轮播图+背景变化所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。