小程序---轮播图+主题背景对应变化

士女士女子

已于 2023-07-13 11:03:16 修改

阅读量509

点赞数 1

文章标签：小程序 css

于 2023-07-12 23:53:58 首次发布

本文链接：https://blog.csdn.net/weixin_52199120/article/details/131690371

版权

该文章介绍了如何仿照益禾堂小程序创建一个网易云音乐主题界面，实现主页背景和轮播图同时变化的效果。作者通过WXML设置组件结构，WXSS定义样式，JS处理数据绑定和事件监听，特别是`getSwiperIndex`函数用于更新背景图片的索引，达到与轮播图同步的目的。

摘要由CSDN通过智能技术生成

题外话：

我做的是一个仿网易云音乐小程序的主页背景与轮播图同时变化，想法来源于昨天无意间看到了益禾堂点单小程序的主界面使用了类似的设计，让我觉得挺新颖的，于是也想试一下，哈哈。

益禾堂小程序界面：我做的网易云主题界面：

实现过程：

wxml文件：

<view class="bgmovie">
   <image  mode="widthFix" src="{{backgroundArr[swiperIndex].imageUrl}}"/>
</view>
<swiper autoplay interval="3000" indicator-dots circular indicator-active-color="red" bindchange="getSwiperIndex">
    <block  wx:for="{{backgroundArr}}" wx:key="*this" >
        <swiper-item>
            <image src="{{item.imageUrl}}"></image>
        </swiper-item>
    </block>
</swiper>

wxss文件：

/* 背景随轮播图而改变 */
.bgmovie {
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*背景图片*/
.bgmovie image {
    width: 100%;
    height: 100%;
    transform: scale(5);
    filter:blur(30rpx);
}
/*轮播图*/
swiper{
    width: 100%;
    height: 300rpx;
   
}
swiper swiper-item {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
swiper-item image {
    display: block;
    width: 650rpx;
    height: 100%;
    border-radius: 20rpx;
    justify-content: center;
    align-items: center;
}

js文件：

Page({

    /* 页面的初始数据*/
    data: {
        // 获取背景轮播图
        backgroundArr:[],
        // 获取轮播图索引值
        swiperIndex:0,
    },

    /* 背景随轮播图而改变 */
    getSwiperIndex(e) {
        // console.log(e);
        let currentIndex = e.detail.current;
        this.setData({
            swiperIndex:currentIndex
        })
    },
    // 获取轮播图数据
    async getBannerData() {
        let res = await getBanner();
        let backgroundArr = [];
        await res.data.banners.forEach(async(items) => {
            backgroundArr.push(items);
            this.setData({
                backgroundArr
            })
        })
    },