微信小程序 監聽手勢滑動切換頁面實例詳解

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; 
 }, 
. 
. 
. 
})

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

微信小程序 scroll-view實現上拉加載與下拉刷新的實例

微信小程序 彈窗自定義的代碼

微信小程序開發之跑步微信小程序

以上就是微信小程序 監聽手勢滑動切換頁面的實現的詳細內容，更多請關注php中文網其它相關文章！