微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解
更新時間：2017年06月15日 15:23:35 投稿：lqh
這篇文章主要介紹了微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解的相關(guān)資料,需要的朋友可以參考下
微信小程序 監(jiān)聽手勢滑動切換頁面實例詳解
1.對應(yīng)的xml里寫上手勢開始、滑動、結(jié)束的監(jiān)聽：
<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
2.js:
var touchDot = 0;//觸摸時的原點
var time = 0;// 時間記錄，用于滑動時且時間小于1s則執(zhí)行左右滑動
var interval = "";// 記錄/清理時間記錄
Page({
data: {...}
})
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;
},
.
.
.
})
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序--組件（swiper）詳細介紹的相關(guān)資料,需要的朋友可以參考下2017-06-06
Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析
這篇文章主要為大家介紹了Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了微信小程序 圖片邊框解決方法的相關(guān)資料,需要的朋友可以參考下2017-01-01
前端JavaScript徹底弄懂函數(shù)柯里化curry
隨著主流JavaScript中函數(shù)式編程的迅速發(fā)展， 函數(shù)柯里化在許多應(yīng)用程序中已經(jīng)變得很普遍。 了解它們是什么，它們?nèi)绾喂ぷ饕约叭绾纬浞掷盟鼈兎浅Ｖ匾?。本篇文章小編九向大家詳細介紹JavaScript函數(shù)柯里化，需要的小伙伴可以參考下面文字內(nèi)容2021-09-09
mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數(shù)。本文重點給大家介紹使用MUI框架模擬手機端的下拉刷新和上拉加載功能，感興趣的朋友參考下吧2017-09-09
微信小程序 獲取javascript 里的數(shù)據(jù)
這篇文章主要介紹了微信小程序 獲取javascript 里的數(shù)據(jù)的相關(guān)資料,這里通過實例來說明如何獲取javascript里的數(shù)據(jù)，希望能幫助到大家，需要的朋友可以參考下2017-08-08
這篇文章主要為大家介紹了3分鐘精通高階前端隨手寫TS插件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 支付功能（前端）的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 UI布局常用技巧整理總結(jié)的相關(guān)資料,現(xiàn)在不論是APP 還是各種軟件，UI布局還是非常重要的，用戶體驗第一位啊，這里就整理下微信小程序的UI布局，需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了webpack的安裝配置及使用的教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06