微信小程序圖片輪播

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

這里將項(xiàng)目創(chuàng)建在D:\SotfWare\WechatPG\test1。test1是項(xiàng)目的文件名。創(chuàng)建結(jié)束之后，會(huì)自動(dòng)在test1中出現(xiàn)如圖所示的各類(lèi)文件。

步驟二：在pages中創(chuàng)建pictures文件。并將需要輪播的圖片導(dǎo)入。

步驟三：在需要輪播的頁(yè)面中打開(kāi)wxml文件（這里在logs所在頁(yè)面進(jìn)行圖片的輪播）在logs.wxml中添加代碼（圖后提供可復(fù)制代碼）

<!--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中通過(guò)style='height:200px;width:100%可調(diào)節(jié)swiper控件大小

步驟四：在logs.js文件中添加如圖所示代碼（圖后提供可復(fù)制代碼）

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

注意：這里圖片的路徑就是我們之前創(chuàng)建文件的picture所在的地方。

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

到這里，圖片就可以進(jìn)行輪播了。

END

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。