| 屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
|---|---|---|---|---|
| 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),
})
}
}
})