【swiper】 組件說明
阿新 • • 發佈：2018-11-01
wip 不顯示 時間 觸摸 body isp current -a 分頁
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 字段來判斷是否是由於用戶觸摸引起。
【swiper】 組件說明