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

士女士女子

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

阅读量729

点赞数 2

CC 4.0 BY-SA版权

文章标签：小程序 css

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

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

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

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

题外话：

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

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

实现过程：

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}