微信小程序上手-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ā)論壇