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

Gardenia_lan

已于 2022-05-09 15:54:20 修改

阅读量3.5k

点赞数 7

分类专栏：微信小程序 JavaScript 文章标签： html 前端微信小程序

于 2022-05-09 15:51:11 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57278611/article/details/124663091

版权

JavaScript 同时被 2 个专栏收录

11 篇文章

订阅专栏

微信小程序

6 篇文章

订阅专栏

这篇博客展示了如何在微信小程序中创建一个带有渐变背景的轮播图组件。通过结合HTML、JS和CSS代码，实现了轮播图图片切换时背景颜色随之变化的效果，轮播图自动播放并具有指示点。关键技术和样式包括linear-gradient渐变色、swiper组件的使用以及事件监听更新索引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果：

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;
}

代码展示效果：