小程式swiper 滑塊檢視容器
阿新 • • 發佈:2018-12-12
屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否顯示面板指示點 | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | 1.1.0 |
indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | 1.1.0 |
autoplay | Boolean | false | 是否自動切換 | |
current | Number | 0 | 當前所在滑塊的 index | |
current-item-id | String | "" | 當前所在滑塊的 item-id ,不能與 current 被同時指定 | 1.9.0 |
interval | Number | 5000 | 自動切換時間間隔 | |
duration | Number | 500 | 滑動動畫時長 | |
circular | Boolean | false | 是否採用銜接滑動 | |
vertical | Boolean | false | 滑動方向是否為縱向 | |
previous-margin | String | "0px" | 前邊距,可用於露出前一項的一小部分,接受 px 和 rpx 值 | 1.9.0 |
next-margin | String | "0px" | 後邊距,可用於露出後一項的一小部分,接受 px 和 rpx 值 | 1.9.0 |
display-multiple-items | Number | 1 | 同時顯示的滑塊數量 | 1.9.0 |
skip-hidden-item-layout | Boolean | false | 是否跳過未顯示的滑塊佈局,設為 true 可優化複雜情況下的滑動效能,但會丟失隱藏狀態滑塊的佈局資訊 | 1.9.0 |
bindchange | EventHandle | current 改變時會觸發 change 事件,event.detail = {current: current, source: source} | ||
bindanimationfinish | EventHandle | 動畫結束時會觸發 animationfinish 事件,event.detail 同上 | 1.9.0 |
從 1.4.0 開始,change
事件返回detail
中包含一個source
欄位,表示導致變更的原因,可能值如下:
autoplay
自動播放導致swiper變化;touch
使用者划動引起swiper變化;- 其他原因將用空字串表示。
注意:其中只可放置<swiper-item/>
元件,否則會導致未定義的行為。
swiper-item
僅可放置在<swiper/>
元件中,寬高自動設定為100%。
屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
---|---|---|---|---|
item-id | String | "" | 該 swiper-item 的識別符號 | 1.9.0 |
示例程式碼:
pasting
<!-- autoplay:是否自動切換 current:當前所在滑塊的index circular:是否採用銜接滑動 indicator-dots:是否顯示面板指示點 -->
<swiper indicator-dots="{{banner.length>0}}" autoplay="true" current="{{currentSwiper}}" circular="true" class="zwt_swiper"> <block wx:for="{{banner}}" > <swiper-item bindtap="webfn" data-url="{{item.link}}"> <image src="{{item.pic}}" mode="aspectFit" class='slide-image' /> </swiper-item> </block></swiper>let app = getApp();Page({ data: { currentSwiper: 0, banner: [{ "pic": "http://src.leju.com/imp/imp/deal/d9/d4/e/80fa4f5075848ec36393afc0fdd_p46_mk48.jpeg", "link": "https://m.leju.com/news-bj-6450614724957876758.html" }, { "pic": "http://src.leju.com/imp/imp/deal/26/4b/1/5a319403d781e609820990a7237_p46_mk48.jpeg", "link": "https://m.leju.com/news-bj-6448801379690787539.html" }, { "pic": "http://src.leju.com/imp/imp/deal/8e/51/2/d7b2358a9a424edbb3c1acbad6a_p46_mk48.jpeg", "link": "https://m.leju.com/news-bj-6448446556718019431.html" } ] }, // H5跳轉 webfn: function (e) { var url = e.currentTarget.dataset.url; if (url) { wx.navigateTo({ url: '/pages/webhtml/webhtml?url=' + encodeURIComponent(url), }) } }})