微信小程序轮播图实现

       微信小程序的轮播图可以用官方给的swiper组件。

          下图是官方给出的swiper属性，我截取了比较常用的一些属性。

swiper使用

    微信小程序的.wxml文件中

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true"> <block wx:for="{{imageList}}" wx:key="imageList.url" > <swiper-item> <image src="{{item.url}}" class="slide-image" /> </swiper-item> </block> </swiper>

    .js文件中

         

data: { indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, imageList:[ {"url":"../../../static/image/1.jpg"}, { "url": "../../../static/image/2.png" }, { "url": "../../../static/image/3.jpg" }, }

  效果图如下：