一、前言
swiper組件自帶autoplay切換，本文將會(huì)介紹如何用到左右按鈕切換輪播圖荔睹，以及如何解決快速點(diǎn)擊按鈕出現(xiàn)的bug圆兵。
核心屬性
circular： 負(fù)責(zé)切換銜接的效果（否則最后一張與第一張的切換體驗(yàn)很差）
current： 控制當(dāng)前顯示的頁index索引
autoplay：是否自動(dòng)播放，此處我們選擇false（或者默認(rèn)不寫）
duration：切換頁所需要花的時(shí)間拾氓，一般為1000即1秒
bindchange：current發(fā)生改變觸發(fā)的方法
bindanimationfinish：動(dòng)畫結(jié)束時(shí)觸發(fā)的方法（解決快速點(diǎn)擊產(chǎn)生的bug）
二、代碼
index.html
<view class="test">
<view class="header">
<view style="width:40rpx;height:30rpx;position:absolute;top:30%;left:-60rpx;" bindtap="toLeft">《</view>
<view style="width:40rpx;height:30rpx;position:absolute;top:30%;right:-60rpx;" bindtap="toRight">》</view>
<swiper circular="true" current="{{currentIndex}}" duration="1000" bindchange="changeIndex" bindanimationfinish="changeFinish">
<swiper-item>
<image src="/images/slide_img_1.png" mode="scaleToFill" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/images/slide_img_2.png" mode="scaleToFill" class="slide-image" />
</swiper-item>
<swiper-item>
<image src="/images/slide_img_3.png" mode="scaleToFill" class="slide-image" />
</swiper-item>
</swiper>
</view>
<view class="section"></view>
<view class="footer"></view>
</view>
index.js
// index.js
var app = getApp()
Page({
data: {
currentIndex: 0, // 頁面swiper的current索引
index: 0,
flag: true
},
toLeft: function (e) {
console.log(this.data.flag)
if (!this.data.flag) { // 如果動(dòng)畫還未完成，不執(zhí)行
return
} else {
// 修改按鈕切換不可用狀態(tài)
this.setData({
flag: false
})
var index = this.data.index
if (index > 0) {
this.setData({
currentIndex: index - 1
})
} else {
this.setData({
currentIndex: 2
})
}
}
},
toRight: function (e) {
console.log(this.data.flag)
if (!this.data.flag) { // 如果動(dòng)畫還未完成市袖，不執(zhí)行
return
} else {
// 修改按鈕切換不可用狀態(tài)
this.setData({
flag: false
})
var index = this.data.index
if (index >= 2) {
this.setData({
currentIndex: 0
})
} else {
this.setData({
currentIndex: index + 1
})
}
}
},
changeIndex: function(e) { // 切換過程綁定
this.setData({
index: e.detail.current
})
},
changeFinish: function (e) { // 動(dòng)畫完全完成
// 修改按鈕切換可用狀態(tài)
this.setData({
flag: true
})
}
})
index.wxss
page{
width: 100vw;
height: 100vh;
}
.test {
width: 100%;
height: 100%;
}
.header {
width: 80%;
height: 40%;
margin: 40rpx auto;
position: relative;
}
swiper {
height: 350rpx;
}
.slide-image {
width: 100%;
height: 350rpx;
}
三、注意點(diǎn)
1烁涌、銜接效果在點(diǎn)擊左滑時(shí)正常苍碟，但是右滑到最后一張圖片后，會(huì)失去銜接效果撮执，經(jīng)過第二張?jiān)倩氐降谝粡埼⒎澹@是之前微信小程序的bug（社區(qū)中官方回復(fù)），應(yīng)當(dāng)是和基礎(chǔ)庫版本有關(guān)抒钱，在真機(jī)上體驗(yàn)正常即可蜓肆。
2颜凯、用bindanimationfinish來控制動(dòng)畫切換完全結(jié)束后才可使得左右滑動(dòng)生效，當(dāng)用戶點(diǎn)擊左滑或者右滑后仗扬，按鈕變成“不可用狀態(tài)”症概，直到動(dòng)畫完全結(jié)束。如果沒有這個(gè)控制早芭，當(dāng)快速點(diǎn)擊左滑或者右滑彼城，會(huì)有切換bug。
3退个、代碼中的swiper-item數(shù)量是靜態(tài)寫死的募壕，真實(shí)場景用for循環(huán)，判斷item的數(shù)量语盈，所以js中也需要修改判斷首項(xiàng)末項(xiàng)處的索引index舱馅。另外代碼以及頁面美觀度和精簡度，此處也不予深究刀荒。
