微信小程序 監聽手勢滑動切換頁面實例詳解
1.對應的xml里寫上手勢開始、滑動、結束的監聽：
<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
2.js:
var touchDot = 0;//觸摸時的原點 var time = 0;// 時間記錄，用于滑動時且時間小于1s則執行左右滑動 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: '../右滑頁面/右滑頁面' }); } }, // 觸摸結束事件 touchEnd: function (e) { clearInterval(interval); // 清除setInterval time = 0; }, . . . }) 感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
