swiper中文文檔-swiper小程序開(kāi)發(fā)示例

　　swiper中文文檔

　　基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持，低版本需做兼容處理。

　　滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。

　　屬性類型默認(rèn)值必填說(shuō)明最低版本

　　indicator-dotsbooleanfalse否是否顯示面板指示點(diǎn)1.0.0

　　indicator-colorcolorrgba(0, 0, 0, .3)否指示點(diǎn)顏色1.1.0

　　indicator-active-colorcolor#000000否當(dāng)前選中的指示點(diǎn)顏色1.1.0

　　autoplaybooleanfalse否是否自動(dòng)切換1.0.0

　　currentnumber0否當(dāng)前所在滑塊的 index1.0.0

　　intervalnumber5000否自動(dòng)切換時(shí)間間隔1.0.0

　　durationnumber500否滑動(dòng)動(dòng)畫時(shí)長(zhǎng)1.0.0

　　circularbooleanfalse否是否采用銜接滑動(dòng)1.0.0

　　verticalbooleanfalse否滑動(dòng)方向是否為縱向1.0.0

　　previous-marginstring"0px"否前邊距，可用于露出前一項(xiàng)的一小部分，接受 px 和 rpx 值1.9.0

　　next-marginstring"0px"否后邊距，可用于露出后一項(xiàng)的一小部分，接受 px 和 rpx 值1.9.0

　　snap-to-edgeboolean"false"否當(dāng) swiper-item 的個(gè)數(shù)大于等于 2，關(guān)閉 circular 并且開(kāi)啟 previous-margin 或 next-margin 的時(shí)候，可以指定這個(gè)邊距是否應(yīng)用到第一個(gè)、最后一個(gè)元素2.12.1

　　display-multiple-itemsnumber1否同時(shí)顯示的滑塊數(shù)量1.9.0

　　easing-functionstring"default"否指定 swiper 切換緩動(dòng)動(dòng)畫類型2.6.5

　　bindchangeeventhandle否current 改變時(shí)會(huì)觸發(fā) change 事件，event.detail = {current, source}1.0.0

　　bindtransitioneventhandle否swiper-item 的位置發(fā)生改變時(shí)會(huì)觸發(fā) transition 事件，event.detail = {dx: dx, dy: dy}2.4.3

　　bindanimationfinisheventhandle否動(dòng)畫結(jié)束時(shí)會(huì)觸發(fā) animationfinish 事件，event.detail 同上1.9.0

　　easing-function 的合法值

　　值說(shuō)明最低版本

　　default默認(rèn)緩動(dòng)函數(shù)

　　linear線性動(dòng)畫

　　easeInCubic緩入動(dòng)畫

　　easeOutCubic緩出動(dòng)畫

　　easeInOutCubic緩入緩出動(dòng)畫

　　change事件 source 返回值

　　從 1.4.0 開(kāi)始，change事件增加 source字段，表示導(dǎo)致變更的原因，可能值如下：

　　autoplay 自動(dòng)播放導(dǎo)致swiper變化;

　　touch 用戶劃動(dòng)引起swiper變化;

　　其它原因?qū)⒂每兆址硎尽?/p>

　　Bug & Tip

　　tip: 如果在 bindchange 的事件回調(diào)函數(shù)中使用 setData 改變 current 值，則有可能導(dǎo)致 setData 被不停地調(diào)用，因而通常情況下請(qǐng)?jiān)诟淖?current 值前檢測(cè) source 字段來(lái)判斷是否是由于用戶觸摸引起。

　　Page({

　　onShareAppMessage() {

　　return {

　　title: 'swiper',

　　path: 'page/component/pages/swiper/swiper'

　　}

　　},

　　data: {

　　background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

　　indicatorDots: true,

　　vertical: false,

　　autoplay: false,

　　interval: 2000,

　　duration: 500

　　},

　　changeIndicatorDots() {

　　this.setData({

　　indicatorDots: !this.data.indicatorDots

　　})

　　},

　　changeAutoplay() {

　　this.setData({

　　autoplay: !this.data.autoplay

　　})

　　},

　　intervalChange(e) {

　　this.setData({

　　interval: e.detail.value

　　})

　　},

　　durationChange(e) {

　　this.setData({

　　duration: e.detail.value

　　})

　　}

　　})