微信小程序 监听手势滑动切换页面实例详解

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

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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # 监听手势滑动切换页面  # 小程序  # 手势滑动  # 微信小程序 两种滑动方式（横向滑动  # 竖向滑动）详细及实例代码  # 微信小程序 scroll-view实现锚点滑动的示例  # 微信小程序图片横向左右滑动案例  # 微信小程序左右滑动切换页面详解及实例代码  # 微信小程序侧边栏滑动特效(左右滑动)  # 微信小程序 页面滑动事件的实例详解  # 微信小程序左右滑动的实现代码  # 微信小程序 向左滑动删除功能的实现  # 微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码  # 小程序实现滑动块效果  # 计时器  # 希望能  # 谢谢大家  # 写上  # touchStart  # bindtouchmove  # bindtouchstart  # js  # touchMove  # touchEnd  # gt  # bindtouchend  # xml  # pre  # strong  # 微信小  # view  # touch  # lt  # class 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 非常酷的网站设计制作软件,酷培ai教育官方网站？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何在IIS管理器中快速创建并配置网站？  Python函数文档自动校验_规范解析【教程】  LinuxShell函数封装方法_脚本复用设计思路【教程】  浅谈Javascript中的Label语句  微信小程序 require机制详解及实例代码  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  Python正则表达式进阶教程_复杂匹配与分组替换解析  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何用西部建站助手快速创建专业网站？  如何快速搭建高效香港服务器网站？  javascript中的try catch异常捕获机制用法分析  Laravel如何使用Service Container和依赖注入？（代码示例）  java中使用zxing批量生成二维码立牌  敲碗10年！Mac系列传将迎来「触控与联网」双革新  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  香港服务器建站指南：免备案优势与SEO优化技巧全解析  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  Laravel如何使用.env文件管理环境变量？（最佳实践）  大学网站设计制作软件有哪些,如何将网站制作成自己app？  如何在云指建站中生成FTP站点？  太平洋网站制作公司,网络用语太平洋是什么意思？  网站页面设计需要考虑到这些问题  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  手机网站制作与建设方案,手机网站如何建设？  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  如何用好域名打造高点击率的自主建站？  网站制作企业,网站的banner和导航栏是指什么？  如何正确选择百度移动适配建站域名？  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  想要更高端的建设网站，这些原则一定要坚持！  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  如何在腾讯云服务器快速搭建个人网站？  Bootstrap整体框架之JavaScript插件架构  如何快速重置建站主机并恢复默认配置？  如何用美橙互联一键搭建多站合一网站？  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  Laravel PHP版本要求一览_Laravel各版本环境要求对照  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践