微信小程序上手-swiper使用
swiper
滑塊視圖容器。
屬性名類型默認(rèn)值說明最低版本
indicator-dotsBooleanfalse是否顯示面板指示點(diǎn)
indicator-colorColorrgba(0, 0, 0, .3)指示點(diǎn)顏色1.1.0
indicator-active-colorColor#000000當(dāng)前選中的指示點(diǎn)顏色1.1.0
autoplayBooleanfalse是否自動切換
currentNumber0當(dāng)前所在頁面的 index
intervalNumber5000自動切換時間間隔
durationNumber500滑動動畫時長
circularBooleanfalse是否采用銜接滑動
verticalBooleanfalse滑動方向是否為縱向
bindchangeEventHandlecurrent 改變時會觸發(fā) change 事件，event.detail = {current: current, source: source}
從公共庫v1.4.0開始，change事件返回detail中包含一個source字段，表示導(dǎo)致變更的原因浪慌，可能值如下：
autoplay自動播放導(dǎo)致swiper變化；
touch用戶劃動引起swiper變化尖昏；
其他原因?qū)⒂每兆址硎尽?/p>
注意：其中只可放置組件串绩，否則會導(dǎo)致未定義的行為赖歌。
swiper-item
僅可放置在組件中枉圃，寬高自動設(shè)置為100%。
示例代碼：
autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}">
indicator-dots
autoplay
interval
duration
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
},
changeIndicatorDots:function(e){
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay:function(e){
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange:function(e){
this.setData({
interval: e.detail.value
})
},
durationChange:function(e){
this.setData({
duration: e.detail.value
})
}
})
以下文章為作者原創(chuàng)文章庐冯，普通轉(zhuǎn)載請聯(lián)系站長同意后轉(zhuǎn)載孽亲，商業(yè)轉(zhuǎn)載請聯(lián)系作者：
原文網(wǎng)站：一發(fā)論壇
