微信小程式中輪播圖的實作

最近在使用WePY架構開發一款微信小程式，下面是記錄的在首頁中實作一個圖檔輪播功能的具體實作。

1.template中使用swiper标簽。

<swiper class="swiper" indicator-active-color="{{indicatorActiveColor}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
      <block wx:for="{{imgUrls}}" wx:key="key">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
           

2.script中定義一個data。

data = {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    indicatorActiveColor: '#fff',
    imgUrls: [
      '../images/swiper1.jpg',
      '../images/swiper2.jpg',
      '../images/swiper3.jpg',
      '../images/swiper4.jpg'
    ]
  }