一.基本實(shí)現(xiàn)
<swiper>
<swiper-item></swiper-item>
</swiper>
- swiper: 父標(biāo)簽。其中只可放置<swiper-item/>組件，否則會(huì)導(dǎo)致未定義的行為。默認(rèn)width:100%；height：150px；
- swiper-item: 子標(biāo)簽。 僅可放置在<swiper/>組件中，寬高自動(dòng)設(shè)置為100%。
二. 屬性說明
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| vertical | Boolean | false | 滑動(dòng)方向是否為縱向 |
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn)。橫向顯示：指示點(diǎn)在低中部?？v向顯示：指示點(diǎn)在右中部。 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 未選中的指示點(diǎn)顏色 |
| indicator-active-color | Color | #000000 | 選中的指示點(diǎn)顏色 |
| autoplay | Boolean | false | 是否自動(dòng)輪播 |
| interval | Number | 5000ms | 自動(dòng)輪播的時(shí)間間隔 |
| duration | Number | 500ms | 輪播的動(dòng)畫時(shí)長 |
| circular | Boolean | false | 是否銜接循環(huán)滑動(dòng) |
| previous-margin | String | "0px" | 前邊距，可用于露出前一項(xiàng)的一小部分，接受 px 和 rpx 值 |
| next-margin | String | "0px" | 后邊距，可用于露出后一項(xiàng)的一小部分，接受 px 和 rpx 值 |
| display-multiple-items | Number | 1 | 同時(shí)顯示的swiper-item的數(shù)量 |
| current | Number | 0 | 當(dāng)前所在滑塊的 index。 設(shè)置該屬性，可以讓swiper默認(rèn)顯示第幾個(gè)元素，注意不要數(shù)組越界。 |
| current-item-id | String | "" | 當(dāng)前所在滑塊的 item-id ，不能與 current 被同時(shí)指定. 需要指定current-item-id為某一個(gè)swiper-item的item-id，不要指定到一個(gè)不存在的item-id |
| 事件名 | 類型 | 說明 |
|---|---|---|
| bindanimationfinish | EventHandle | 輪播動(dòng)畫結(jié)束時(shí)會(huì)觸發(fā) animationfinish 事件。即監(jiān)聽滑動(dòng)到第幾個(gè)item的事件。 |
| bindchange | EventHandle | current 改變時(shí)會(huì)觸發(fā) change 事件 |
兩者基本沒有什么區(qū)別。
四. 其他
點(diǎn)擊事件 ： 點(diǎn)擊某一個(gè)swiper跳轉(zhuǎn)頁面
// wxml
<swiper catchtap="onItemClick">
<swiper-item>
<view data-postId="10"></view>
</swiper-item>
</swiper>
// js
onItemClick:function(event) {
// 獲得到點(diǎn)擊的swiper-item進(jìn)行頁面跳轉(zhuǎn)處理，這里用模態(tài)展示效果
wx.showToast({
icon: "none",
title: "postid=" + event.target.dataset.postid,
})
}
五. 可運(yùn)行代碼
- wxml
<view class="container">
<swiper class="swiper" indicator-dots autoplay circular indicator-color='gray' indicator-active-color='red' interval="3000" bindchange="bindchange" bindanimationfinish="animationfinish" catchtap="onItemClick" current-item-id="{{index}}">
<swiper-item item-id="0">
<view class="swiper-item swiper-item-zero" data-postId="0">第0個(gè)</view>
</swiper-item>
<swiper-item item-id="1">
<view class="swiper-item swiper-item-one" data-postId="1">第1頁</view>
</swiper-item>
<swiper-item item-id="2">
<view class="swiper-item swiper-item-two" data-postId="2">第2頁</view>
</swiper-item>
</swiper>
</view>
- wxss
.swiper {
background-color: red;
width: 50%;
height: 200px;
}
.swiper-item {
text-align: center;
line-height: 200px;
}
.swiper-item-zero {
background-color: yellow;
}
.swiper-item-one {
background-color: orange;
}
.swiper-item-two {
background-color: greenyellow;
}
- js
Page({
data: {
index: 1 // 默認(rèn)滑動(dòng)到第幾頁
},
onLoad: function (options) {
},
bindchange: function (event) {
console.log("bindchange");
console.log(event);
},
onItemClick: function (event) {
wx.showToast({
icon: "none",
title: "postid=" + event.target.dataset.postid,
})
},
animationfinish: function (event) {
console.log("animationfinish");
console.log(event);
}
})
