微信小程序圖片輪轉播放

微信小程序圖片輪播

步驟一：創建項目，注意創建的路徑，路徑中涉及到的文件最好用英文命名。

這裏將項目創建在D:\SotfWare\WechatPG\test1。test1是項目的文件名。創建結束之後，會自動在test1中出現如圖所示的各類文件。

步驟二：在pages中創建pictures文件。並將需要輪播的圖片導入。

步驟三：在需要輪播的頁面中打開wxml文件（這裏在logs所在頁面進行圖片的輪播）在logs.wxml中添加代碼（圖後提供可複製代碼）

<!--logs.wxml-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval = "{{interval}}" duration="{{duration}}"
 style='height:200px;width:100%'>
  <block wx:for="{{pictureUrls}}">
    <swiper-item>
       <image src = "{{item}}" class = "slide-image"/>
    </swiper-item>
  </block>
</swiper>

在swiper中通過style='height:200px;width:100%可調節swiper控件大小

步驟四：在logs.js文件中添加如圖所示代碼（圖後提供可複製代碼）

Page({
  data: {
    pictureUrls: [
      '/pages/pictures/1.jpg',
      '/pages/pictures/2.jpg',
      '/pages/pictures/3.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000    
  }
})

注意：這裏圖片的路徑就是我們之前創建文件的picture所在的地方。

步驟五：在logs.wxss文件中可以控制輪播圖片的大小，這裏的slide-image需要在<image>中的class中定義。

到這裏，圖片就可以進行輪播了。

END