微信小程序手势操作之单触摸点与多触摸点


Posted in Javascript onMarch 10, 2017

前言

手势对于一些效果是比较重要的,在canvas、交互等中应用非常广,看一下微信小程序手势是如何的。

Demo

为了研究小程序是否支持多手指,需要使用touchstart,touchmove,touchend

// index.wxml
<view id="gestureView" bindtouchstart="touchstartFn" bindtouchmove="touchmoveFn" bindtouchend="touchendFn" >
</view>
//index.js
touchstartFn: function(event){
  console.log(event);
 },
 touchmoveFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 },
 touchendFn: function(event){
  console.log(event);
  // console.log("move: PageX:"+ event.changedTouches[0].pageX);
 }

单触摸点,多触摸点

官方文档:changedTouches

changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

"changedTouches":[{ 
"identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14
}]

真机效果

实现以上Demo后模拟器是无法看到多触摸点的数据的,所以你需要真机来测试。

看下真机的log信息

微信小程序手势操作之单触摸点与多触摸点

在changedTouches中按顺序保存触摸点的数据,所以小程序本身支持多触摸点的手势

结论

设想: 既然小程序的手势是支持多触摸,而且可以获取到相关的路径,那么相关路径计算也是可行的。

场景: 多触摸交互效果,手指绘制等

触摸点数据保存

为了能够来分析触摸点的路径,最起码是简单的手势,如左滑、右滑、上滑、下滑,我们需要保存起路径的所有数据。

触摸事件

触摸触发事件分为"touchstart", "touchmove", "touchend","touchcancel"四个

详见:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html20

存储数据

var _wxChanges = [];
var _wxGestureDone = false;
const _wxGestureStatus = ["touchstart", "touchmove", "touchend","touchcancel"];
// 收集路径
function g(e){
  if(e.type === "touchstart"){
    _wxChanges = [];
    _wxGestureDone = false;
  }
  if(!_wxGestureDone){
    _wxChanges.push(e);
    if(e.type === "touchend"){
      _wxGestureDone = true; 
    }else if(e.type === "touchcancel"){
      _wxChanges = [];
      _wxGestureDone = true; 
    }
  }
}

结尾

这篇文章,主要探索一下,希望你也可以提前看一下手势的解析。

Javascript 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 #Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 #Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 #Javascript
AngularJS之页面跳转Route实例代码
Mar 10 #Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 #Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 #Javascript
Vue.js之slot深度复制详解
Mar 10 #Javascript
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python MD5加密实例详解
2017/08/02 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python Json数据文件操作原理解析
2020/05/09 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
大学自主招生自荐信
2013/12/16 职场文书
户外活动策划方案
2014/03/12 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL