微信小程序如何監(jiān)聽手勢(shì)滑動(dòng)切換頁面

這篇文章給大家分享的是有關(guān)微信小程序如何監(jiān)聽手勢(shì)滑動(dòng)切換頁面的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

微信小程序 監(jiān)聽手勢(shì)滑動(dòng)切換頁面實(shí)例詳解

1.對(duì)應(yīng)的xml里寫上手勢(shì)開始、滑動(dòng)、結(jié)束的監(jiān)聽：

<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>

2.js:

var touchDot = 0;//觸摸時(shí)的原點(diǎn) 
var time = 0;// 時(shí)間記錄，用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng) 
var interval = "";// 記錄/清理時(shí)間記錄 
Page({ 
 data: {...} 
   })

Page({ 
 data: { 
     ... 
 }, 
 // 觸摸開始事件 
 touchStart: function (e) { 
  touchDot = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn) 
  // 使用js計(jì)時(shí)器記錄時(shí)間  
  interval = setInterval(function () { 
   time++; 
  }, 100); 
 }, 
 // 觸摸移動(dòng)事件 
 touchMove: function (e) { 
  var touchMove = e.touches[0].pageX; 
  console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot)); 
  // 向左滑動(dòng)  
  if (touchMove - touchDot <= -40 && time < 10) { 
   wx.switchTab({ 
    url: '../左滑頁面/左滑頁面' 
   });  
  } 
  // 向右滑動(dòng) 
  if (touchMove - touchDot >= 40 && time < 10) { 
   console.log('向右滑動(dòng)'); 
   wx.switchTab({ 
    url: '../右滑頁面/右滑頁面' 
   });  
  } 
 }, 
 // 觸摸結(jié)束事件 
 touchEnd: function (e) { 
  clearInterval(interval); // 清除setInterval 
  time = 0; 
 }, 
. 
. 
. 
})

感謝各位的閱讀！關(guān)于“微信小程序如何監(jiān)聽手勢(shì)滑動(dòng)切換頁面”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！