微信小程式——圖檔輪播

圖檔輪播

HTML

（官方文檔）

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
           

js(html文檔所對應的js)

圖檔路徑為從整個檔案最外層寫路徑

Page({
  data: {
      imgUrls: [
        '/pages/img/img_1.jpg',
        '/pages/img/img_2.jpg',
        '/pages/img/img_3.jpg'
      ],
    }
  }
           

如果輪播框未占滿整個頁面，需要給page及輪播view設定寬高