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


Posted in Javascript onJune 15, 2017

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

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

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

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
浅谈jquery事件处理
Apr 24 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
小程序实现留言板
Nov 02 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
微信小程序canvas写字板效果及实例
Jun 15 #Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 #Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 #Javascript
详解react-router如何实现按需加载
Jun 15 #Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 #Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 #Javascript
You might like
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
layui表格实现代码
2017/05/20 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Django实现学生管理系统
2019/02/26 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
写自荐信要注意什么
2013/12/26 职场文书
开工仪式主持词
2014/03/20 职场文书
职业规划实施方案
2014/06/10 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
浅谈redis缓存在项目中的使用
2021/05/20 Redis