1. 程式人生 > >【swiper】 元件說明

【swiper】 元件說明

swiper 滑塊檢視容器,其原型如下:

 1 <swiper
 2   indicator-dots="[Boolean]"
 3   indicator-color="[Color]"
 4   indicator-active-color="[Color]"
 5   autoplay="[Boolean]"
 6   current="[Number]"
 7   current-item-id="[String]"
 8   interval="[Number]"
 9   duration="[Number]"
10   circular="[Boolean]"
11   vertical
="[Boolean]" 12 previous-margin="[String]" 13 next-margin="[String]" 14 display-multiple-items="[Number]" 15 skip-hidden-item-layout="[Boolean]" 16 bindchange="[EventHandle]" 17 bindanimationfinish="[EventHandle]" 18 > 19 <swiper-item item-id="[String]"><!-- 資料內容 --></
swiper-item> 20 </swiper>

 

<swiper>元件屬性說明:

屬性 是否必需 型別 預設值 說明
indicator-dots Boolean false 是否顯示面板指示點,預設不顯示(分頁小圓點)
indicator-color Color rgba(0, 0, 0, .3) 指示點顏色
indicator-active-color Color #000000 當前選中的指示點顏色
autoplay Boolean false 是否自動切換
current Number 0 當前所在滑塊的 index
current-item-id String   當前所在滑塊的 item-id ,不能與 current 被同時指定
interval Number 5000 自動切換時間間隔
duration Number 500 滑動動畫時長
circular Boolean false 是否採用銜接滑動(播到最後時再從第一個開始)
vertical Boolean false 滑動方向是否為縱向
previous-margin String 0px 前邊距,可用於露出前一項的一小部分,接受 px 和 rpx 值
next-margin String 0px 後邊距,可用於露出後一項的一小部分,接受 px 和 rpx 值
display-multiple-items Number 1 同時顯示的滑塊數量(比如可以在一屏內顯示二個swiper-item)
skip-hidden-item-layout Boolean false 是否跳過未顯示的滑塊佈局,設為 true 可優化複雜情況下的滑動效能,但會丟失隱藏狀態滑塊的佈局資訊
bindchange EventHandle  

current 改變時會觸發 change 事件

EventHandle函式自帶引數event

event.detail = {current: current, source: source}

event.detail.source返回滑塊變更的原因,可能值如下:

1) 'autoplay' 自動播放導致swiper變化;

2) 'touch' 使用者划動引起swiper變化;

3) 空字串,表示其他原因。

bindanimationfinish EventHandle   動畫結束時會觸發,EventHandle函式引數同bindchange

 

<swiper-item>元件屬性說明:

屬性 是否必須 型別 預設值 說明
item-id String   該 swiper-item 的識別符號

 

注意事項:

1)swiper由<swiper>、<swiper-item>兩部份組成。

2) swiper內只可放置<swiper-item/>元件,否則會導致未定義的行為。

3)swiper-item元件僅可放置在swiper內,寬高自動設定為100%。

4)如果在 bindchange 的事件回撥函式中使用 setData 改變 current 值,則有可能導致 setData 被不停地呼叫,因而通常情況下請在改變 current 值前檢測 source 欄位來判斷是否是由於使用者觸控引起。