這篇文章主要介紹了微信小程序監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的盱眙網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

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: { 
     ... 
 }, 
 // 觸摸開(kāi)始事件 
 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: '../左滑頁(yè)面/左滑頁(yè)面' 
   });  
  } 
  // 向右滑動(dòng) 
  if (touchMove - touchDot >= 40 && time < 10) { 
   console.log('向右滑動(dòng)'); 
   wx.switchTab({ 
    url: '../右滑頁(yè)面/右滑頁(yè)面' 
   });  
  } 
 }, 
 // 觸摸結(jié)束事件 
 touchEnd: function (e) { 
  clearInterval(interval); // 清除setInterval 
  time = 0; 
 }, 
. 
. 
. 
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面的示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：微信小程序監(jiān)聽(tīng)手勢(shì)滑動(dòng)切換頁(yè)面的示例-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/ddpigh.html