今天寫(xiě)下關(guān)于小程序里面如何寫(xiě)swiper圖片自動(dòng)切換效果。廢話不多說(shuō)，先看代碼。

wxml代碼：

<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,//面板指示點(diǎn)
      autoplay: true,//自動(dòng)切換
      interval: 5000,//自動(dòng)切換時(shí)間間隔
      duration: 500, //滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
  },
})

最終效果：

image.png