小程序模板网

微信小程序 监听手势滑动切换页面

发布时间:2017-12-19 10:22 所属栏目:小程序开发教程

1.对应的xml里写上手势开始、滑动、结束的监听:view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" /view2.js: view plain copyvar touchDot = 0;//触摸时的原点 ...

 
 
 

1.对应的xml里写上手势开始、滑动、结束的监听:

 

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

2.js:

 

		
  1. [javascript] view plain copy
  2. var touchDot = 0;//触摸时的原点
  3. var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动
  4. var interval = "";// 记录/清理时间记录
  5. Page({
  6. data: {...}
  7. })
 

		
  1. Page({
  2. data: {
  3. ...
  4. },
  5. // 触摸开始事件
  6. touchStart: function (e) {
  7. touchDot = e.touches[0].pageX; // 获取触摸时的原点
  8. // 使用js计时器记录时间
  9. interval = setInterval(function () {
  10. time++;
  11. }, 100);
  12. },
  13. // 触摸移动事件
  14. touchMove: function (e) {
  15. var touchMove = e.touches[0].pageX;
  16. console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
  17. // 向左滑动
  18. if (touchMove - touchDot <= -40 && time < 10) {
  19. wx.switchTab({
  20. url: '../左滑页面/左滑页面'
  21. });
  22. }
  23. // 向右滑动
  24. if (touchMove - touchDot >= 40 && time < 10) {
  25. console.log('向右滑动');
  26. wx.switchTab({
  27. url: '../右滑页面/右滑页面'
  28. });
  29. }
  30. },
  31. // 触摸结束事件
  32. touchEnd: function (e) {
  33. clearInterval(interval); // 清除setInterval
  34. time = 0;
  35. },
  36. .
  37. .
  38. .
  39. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18200.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询