微信小程序監(jiān)聽手勢滑動切換頁面的示例

這篇文章主要介紹了微信小程序監(jiā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; 
 }, 
. 
. 
. 
})

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序監(jiān)聽手勢滑動切換頁面的示例”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!