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


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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
了解JavaScript函数中的默认参数
May 30 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python描述器descriptor详解
2015/02/03 Python
理解Python中的类与实例
2015/04/27 Python
pycharm安装图文教程
2017/05/02 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
精选奢华:THE LIST
2019/09/05 全球购物
若干个Java基础面试题
2015/05/19 面试题
优秀高中生事迹材料
2014/02/11 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
小学英语复习计划
2015/01/19 职场文书
单位考核聘任报告
2015/03/02 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js