【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事件。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM