微信小程序圖片輪播

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

這里將項目創建在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

總結

以上是生活随笔為你收集整理的微信小程序图片轮转播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。