微信小程序-轮播图

最新推荐文章于 2025-10-22 14:15:32 发布

原创最新推荐文章于 2025-10-22 14:15:32 发布 · 895 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #微信小程序 #javascript

微信小程序专栏收录该内容

3 篇文章

订阅专栏

一、微信小程序轮播图基础实现

（1）核心组件：`<swiper>` 与 `<swiper-item>`

<swiper indicator-dots autoplay interval="3000">  
  <swiper-item><image src="/images/banner1.jpg"></swiper-item>  
  <swiper-item><image src="/images/banner2.jpg"></swiper-item>  
</swiper>

（2）关键属性解析：

autoplay（自动播放）
interval（切换间隔）
circular（循环播放）
indicator-dots（指示点）
indicator-color（自定义样式）

二、动态数据绑定与接口对接

（1）从后端接口获取轮播图数据（模拟JSON数据示例）：

Page({  
  data: {  
    swiperList: [  
      { id: 1, imgUrl: '/images/banner1.jpg', link: '/pages/detail/detail?id=1' },  
      { id: 2, imgUrl: '/images/banner2.jpg', link: '/pages/detail/detail?id=2' }  
    ]  
  },  
  onLoad() {  
    // 此处可替换为 wx.request 请求真实接口  
  }  
})

（2）WXML动态渲染：

<swiper>  
  <block wx:for="{{swiperList}}" wx:key="id">  
    <swiper-item bindtap="onSwiperTap" data-link="{{item.link}}">  
      <image src="{{item.imgUrl}}" mode="aspectFill"></image>  
    </swiper-item>  
  </block>  
</swiper>