Implementation of WeChat applet monitoring gesture sliding to switch pages-Mini Program Development-php.cn

Implementation of WeChat applet monitoring gesture sliding to switch pages

不言

Release： 2018-06-23 15:04:44

Original

5290 people have browsed it

This article mainly introduces the relevant information on the detailed explanation of the example of WeChat applet monitoring gesture sliding switching page. Friends in need can refer to the following

Detailed explanation of the example of WeChat applet monitoring gesture sliding switching page

1. Write the monitoring of gesture start, slide and end in the corresponding xml:

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

Copy after login

2.js:

var touchDot = 0;//触摸时的原点 
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 
var interval = "";// 记录/清理时间记录 
Page({ 
 data: {...} 
   })

Copy after login

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

Copy after login

The above is the entire content of this article, I hope it will be useful to Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program Example of scroll-view implementing pull-up loading and pull-down refresh

WeChat applet Pop-up window customization code

WeChat Mini Program Development Running WeChat Mini Program

The above is the detailed content of Implementation of WeChat applet monitoring gesture sliding to switch pages. For more information, please follow other related articles on the PHP Chinese website!