這篇文章主要介紹了微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解
1.對應(yīng)的xml里寫上手勢開始、滑動、結(jié)束的監(jiān)聽：
<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
登錄后復(fù)制
2.js:
var touchDot = 0;//觸摸時的原點
var time = 0;// 時間記錄，用于滑動時且時間小于1s則執(zhí)行左右滑動
var interval = "";// 記錄/清理時間記錄
Page({
data: {...}
})
登錄后復(fù)制
Page({
data: {
...
},
// 觸摸開始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 獲取觸摸時的原點
// 使用js計時器記錄時間
interval = setInterval(function () {
time++;
}, 100);
},
// 觸摸移動事件
touchMove: function (e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑動
if (touchMove - touchDot <= -40 && time < 10) {
wx.switchTab({
url: '../左滑頁面/左滑頁面'
});
}
// 向右滑動
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑動');
wx.switchTab({
url: '../右滑頁面/右滑頁面'
});
}
},
// 觸摸結(jié)束事件
touchEnd: function (e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
.
.
.
})
登錄后復(fù)制
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)！
相關(guān)推薦：
以上就是微信小程序 監(jiān)聽手勢滑動切換頁面的實現(xiàn)的詳細(xì)內(nèi)容，更多請關(guān)注有卡有網(wǎng)。
