一.基本實現(xiàn)
<swiper>
<swiper-item></swiper-item>
</swiper>
- swiper: 父標(biāo)簽。其中只可放置<swiper-item/>組件，否則會導(dǎo)致未定義的行為官套。默認width:100%盛正；height：150px删咱；
- swiper-item: 子標(biāo)簽。 僅可放置在<swiper/>組件中豪筝，寬高自動設(shè)置為100%痰滋。
二. 屬性說明
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| vertical | Boolean | false | 滑動方向是否為縱向 |
| indicator-dots | Boolean | false | 是否顯示面板指示點。橫向顯示：指示點在低中部续崖∏媒郑縱向顯示：指示點在右中部。 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 未選中的指示點顏色 |
| indicator-active-color | Color | #000000 | 選中的指示點顏色 |
| autoplay | Boolean | false | 是否自動輪播 |
| interval | Number | 5000ms | 自動輪播的時間間隔 |
| duration | Number | 500ms | 輪播的動畫時長 |
| circular | Boolean | false | 是否銜接循環(huán)滑動 |
| previous-margin | String | "0px" | 前邊距严望，可用于露出前一項的一小部分多艇，接受 px 和 rpx 值 |
| next-margin | String | "0px" | 后邊距，可用于露出后一項的一小部分像吻，接受 px 和 rpx 值 |
| display-multiple-items | Number | 1 | 同時顯示的swiper-item的數(shù)量 |
| current | Number | 0 | 當(dāng)前所在滑塊的 index峻黍。 設(shè)置該屬性，可以讓swiper默認顯示第幾個元素拨匆，注意不要數(shù)組越界姆涩。 |
| current-item-id | String | "" | 當(dāng)前所在滑塊的 item-id ，不能與 current 被同時指定. 需要指定current-item-id為某一個swiper-item的item-id惭每，不要指定到一個不存在的item-id |
| 事件名 | 類型 | 說明 |
|---|---|---|
| bindanimationfinish | EventHandle | 輪播動畫結(jié)束時會觸發(fā) animationfinish 事件骨饿。即監(jiān)聽滑動到第幾個item的事件。 |
| bindchange | EventHandle | current 改變時會觸發(fā) change 事件 |
兩者基本沒有什么區(qū)別。
四. 其他
點擊事件 ： 點擊某一個swiper跳轉(zhuǎn)頁面
// wxml
<swiper catchtap="onItemClick">
<swiper-item>
<view data-postId="10"></view>
</swiper-item>
</swiper>
// js
onItemClick:function(event) {
// 獲得到點擊的swiper-item進行頁面跳轉(zhuǎn)處理宏赘，這里用模態(tài)展示效果
wx.showToast({
icon: "none",
title: "postid=" + event.target.dataset.postid,
})
}
五. 可運行代碼
- 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個</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 // 默認滑動到第幾頁
},
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);
}
})
