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