小程序中使用swiper轮播图

在需要的wxml文件中添加以下html

  <swiper
    indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}"
    interval="{{interval}}"
    duration="{{duration}}"
    circular="{{circular}}"
    previous-margin="20rpx"
    next-margin="20rpx"

  >
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image style="display:block;width:98%;margin:0 auto;" src="{{item}}" class="slide-image" mode="widthFix" width="355" height="150" />
      </swiper-item>
    </block>
  </swiper>

然后在js中增加以下片段

data:{
    //swiper
    imgUrls: [
      '../../images/banner1.png',
      '../../images/banner1.png',
      '../../images/banner1.png',
    ],
    indicatorDots: true,//导航点
    autoplay: true,
    circular: true, //衔接滑动
    interval: 5000,
    duration: 1000
    //swiper
}