微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一、前言
swiper組件自帶autoplay切換，本文將會介紹如何用到左右按鈕切換輪播圖，以及如何解決快速點擊按鈕出現(xiàn)的bug。
核心屬性
circular： 負責切換銜接的效果(否則最后一張與第一張的切換體驗很差)
current： 控制當前顯示的頁index索引
autoplay：是否自動播放，此處我們選擇false(或者默認不寫)
duration：切換頁所需要花的時間，一般為1000即1秒
bindchange：current發(fā)生改變觸發(fā)的方法
bindanimationfinish：動畫結(jié)束時觸發(fā)的方法(解決快速點擊產(chǎn)生的bug)
二、代碼
index.html
《
》
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) { // 如果動畫還未完成，不執(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) { // 如果動畫還未完成，不執(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) { // 動畫完全完成
// 修改按鈕切換可用狀態(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;
}
輪播圖簡單頁面
三、注意點
1、銜接效果在點擊左滑時正常，但是右滑到最后一張圖片后，會失去銜接效果，經(jīng)過第二張再回到第一張，這是之前微信小程序的bug(社區(qū)中官方回復(fù))，應(yīng)當是和基礎(chǔ)庫版本有關(guān)，在真機上體驗正常即可。
2、用bindanimationfinish來控制動畫切換完全結(jié)束后才可使得左右滑動生效，當用戶點擊左滑或者右滑后，按鈕變成“不可用狀態(tài)”，直到動畫完全結(jié)束。如果沒有這個控制，當快速點擊左滑或者右滑，會有切換bug。
3、代碼中的swiper-item數(shù)量是靜態(tài)寫死的，真實場景用for循環(huán)，判斷item的數(shù)量，所以js中也需要修改判斷首項末項處的索引index。另外代碼以及頁面美觀度和精簡度，此處也不予深究。
謝謝閱讀，有幫助的點個?！
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql cluster cge (c
- 下一篇： mysql mgr故障恢复实现_MGR实