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


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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
js 求时间差的实现代码
Apr 26 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
php 分页函数multi() discuz
2009/06/21 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python 操作文件的基本方法总结
2017/08/10 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Django中Forms的使用代码解析
2018/02/10 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
高级Java程序员面试要点
2013/08/02 面试题
怎样写好自我评价呢?
2014/02/16 职场文书
腾讯广告词
2014/03/19 职场文书
物业管理专业自荐信
2014/07/01 职场文书
上课不认真检讨书
2014/09/17 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
药店营业员岗位职责
2015/04/14 职场文书
关于迟到的检讨书
2015/05/06 职场文书
2015学校年度工作总结
2015/05/11 职场文书
怎样写好工作计划
2019/04/10 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android