微信小程式之swiper輪播圖
阿新 • • 發佈:2019-01-31
微信小程式,一個不是app勝似app的開發工具,更加準確的說是開發途徑,給非專業開發app的同學們提供了一個絕妙的選擇
輪播圖幾乎是每一個網站、app必有得一個展示區,用於醒目自己的特點、特色。瞭解微信小程式開發的同學都會知道它的目錄以及.js、.wxml、.wxss的所代表的檔案意義
在index.wxml中使用swiper(滑塊檢視容器)做輪播圖
在index.js檔案中定義imgUrls陣列以及swiper的各個屬性值,其屬性代表什麼含義參考開發文件https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item class="banner"> <image src="{{item}}" class="slide-image" width="355px" height="150px"/> </swiper-item> </block> </swiper>
注:在小編的測試過程中,發現,如果swiper被<view></view>等標籤包圍的話是不能出現輪播圖的,也可能是技不如人吧Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000 } })
最後,除錯,就會展現輪播圖。試試吧,如果不行,可以留言交流