【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 字段來判斷是不是因爲用戶觸摸引發。

5）bindchange事件在開始切換時觸發，bindanimationfinish事件在切換完成時觸發。bindchange事件提早於bindanimationfinish事件。