微信小程序 swiper图片轮播切换效果 demo

今天写下关于小程序里面如何写swiper图片自动切换效果。废话不多说，先看代码。

<swiper autoplay="{{autoplay}}" indicator-dots='{{indicatorDots}}' interval="{{interval}}" duration="{{duration}}" class="swiper-show">
            <swiper-item wx:for="{{swiperImg}}" wx:key='{{index}}'>
                <navigator url="{{item.linkUrl}}">
                    <image class="slide-image" src="{{item.imgUrl}}" mode="aspectFill"></image> 
                </navigator>
            </swiper-item>
    </swiper>

js:

Page({
  data: {
    swiperImg: [ 
      {
        linkUrl: 'details/index',
        imgUrl:'http://demo.cssmoban.com/cssthemes5/cpts_1406_cdz/images/21.jpg'
      },
      {
        linkUrl: 'details/index',
        imgUrl:'http://img1qn.moko.cc/2020-04-02/84e22f4e-8d83-4fa7-8f7d-7e1e2add8ca0.jpg'
      },
      {
        linkUrl: 'details/index',
        imgUrl:'http://img1qn.moko.cc/2020-04-01/fc463a32-16f0-4983-af23-ee43e4958631.jpg'
      }
    ],
      indicatorDots: true,//面板指示点
      autoplay: true,//自动切换
      interval: 5000,//自动切换时间间隔
      duration: 500, //滑动动画时长
  },
})

最终效果如下