Implémentation du geste de surveillance de l'applet WeChat glissant pour changer de page

Cet article présente principalement les informations pertinentes sur l'explication détaillée des exemples de pages de commutation de glissement de geste de surveillance de l'applet WeChat. Les amis dans le besoin peuvent se référer à

L'explication détaillée du glissement de geste de surveillance de l'applet WeChat. Exemples de changement de page

1. Écrivez le suivi du début, du glissement et de la fin des gestes dans le xml correspondant :

<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: &#39;../左滑页面/左滑页面&#39; 
   });  
  } 
  // 向右滑动 
  if (touchMove - touchDot >= 40 && time < 10) { 
   console.log(&#39;向右滑动&#39;); 
   wx.switchTab({ 
    url: &#39;../右滑页面/右滑页面&#39; 
   });  
  } 
 }, 
 // 触摸结束事件 
 touchEnd: function (e) { 
  clearInterval(interval); // 清除setInterval 
  time = 0; 
 }, 
. 
. 
. 
})

C'est tout pour cet article. L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Mini programme WeChat Exemple de vue déroulante implémentant le chargement pull-up et l'actualisation déroulante

applet WeChat Code de personnalisation de la fenêtre contextuelle

Développement d'une applet WeChat exécutant l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!