微信小程序翻页效果

最新推荐文章于 2026-05-20 15:34:32 发布

原创最新推荐文章于 2026-05-20 15:34:32 发布 · 1.8w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信 #小程序 #swiper #翻页 #scrollview

收录于

小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于.wxml和.js的轮播图组件实现方案，利用swiper组件完成图片轮播效果，并通过data属性动态设置轮播图数据。

.wxml

<swiper indicator-dots="YES"
  autoplay="YES" interval="5000" duration="500" circular = "YES">
  <block wx:for="{{banner}}">
    <swiper-item>
      <image src="{{item.bannerimg}}" class="slide-image" width="100%" />
    </swiper-item>
  </block>
</swiper>

.js

Page({  
    data: {  
        banner: [],  
    },  
    onLoad: function () {  
        console.log('onLoad')  
        var that = this  
        that.setData({  
            banner: /***设置list数据***/,  
                });