微信小程序绑定事件 有方法解决多点触控事件么

来源：蜘蛛抓取(WebSpider) 时间：2017-09-19 05:00 标签： 微信小程序多点触控
微信小程序 触控事件详细介绍
转载 & & 投稿：lqh
这篇文章主要介绍了微信小程序 触控事件的相关资料,在开发微信小程序的时候，难免会用到这样的功能，这里小编就帮大家梳理下相应的知识，需要的朋友可以参考下
微信小程序 触控事件：
&&&&&&&&&&& 微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全，事件可以向父节点传递，而且打印这个事件的信息很透明，调试起来应该非常方便。
接下来把文档copy过来
原文地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
》》》什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如id, dataset, touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
&view id="tapTest" data-hi="MINA" bindtap="tapName"& Click me! &/view&&
在相应的Page定义中写上相应的事件处理函数，参数是event。
tapName: function(event) {
console.log(event)
可以看到log出来的信息大致如下：
"type": "tap",
"timeStamp": 1252,
"target": {
"id": "tapTest",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {
"hi": "MINA"
"currentTarget": {
"id": "tapTest",
"offsetLeft": 0,
"offsetTop": 0,
"dataset": {
"hi": "MINA"
"touches": [{
"pageX": 30,
"pageY": 12,
"clientX": 30,
"clientY": 12,
"screenX": 112,
"screenY": 151
"detail": {
事件分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
》》》事件分类
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如弹窗和来电提醒
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后后，超过350ms离开
》》》事件绑定
事件绑定的写法同组件的属性，以 key、value 的形式。
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
上面简单介绍了小程序事件基础，是时候彰显"事件"的威力：
双击(dbtap)
长按(longtap)
单击事件由touchstart、touchend组成,touchend后触发tap事件。
&button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap"&点我吧&/button&
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
双击事件由两个单击事件组成，两次间隔时间小于300ms认为是双击；微信官方文档没有双击事件，需要开发者自己定义处理。
&button type="primary" bindtap="mytap"&点我吧&/button&
长按事件手指触摸后，超过350ms再离开。
&button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap"
bindtouchend="mytouchend" bindtap="mytap"&点我吧&/button&
mytouchstart: function(e){ console.log(e.timeStamp + '- touch start')
},//长按事件mylongtap: function(e){ console.log(e.timeStamp + '- long tap')
},mytouchend: function(e){ console.log(e.timeStamp + '- touch end')
},mytap: function(e){ console.log(e.timeStamp + '- tap')
单击、双击、长按属于点触事件，会触发touchstart、touchend、tap事件，touchcancel事件只能在真机模拟，不多说了。
touchstart → touchend → tap
touchstart → touchend → tap → touchstart → touchend → tap
touchstart → longtap → touchend → tap
手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成
以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）。
假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by &
同理，向右滑动到C(cx,cy),满足cx & ax；向下滑动到D(dx,dy),满足dy & ay；向左移动到E(ex，ey)满足ex & ax.
计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n
计算r = m/n,如果r & 1,视为向上滑动。
同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动。
以上没考虑r为1的情况。
&button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove"&点我吧&/button&
5.多点触控
由于模拟器尚不支持多点触控，内测开放后，继续补充。
&感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)第三方登录：想开发微信小程序，您需要知道这五大事件想开发微信小程序，您需要知道这五大事件快乐的独角兽百家号自从微信小程序上线后，很多企业都争先恐后的开发微信小程序，抓住机遇，当然也有一些商家还在待望之中，如果你打算开发微信小程序，那么app开发公司软捷科技提醒你有五点是必须要注意的。1、定位不只是开发微信小程序，做任何项目的之前，都要根据自己的产品和行业先找准自己产品的定位。例如餐饮行业可以通过小程序制作线上菜单，服务行业可以制作线上便捷工具，品牌商家可以打造线上店铺……2、做好线下推广小程序不仅可以通过扫描二维码进入，还可以基于地理位置让附近的用户看到。因此，线下推广小程序最简单粗暴的方法就是，派发传单和举办活动等。3、借助第三方平台快速制作微信小程序上线之后，许多小程序制作平台也迅速涌现，解决企业缺乏开发资金和专业技术的大问题。4、注重用户体验虽然微信严格限制了小程序的消息推送，但仍然设置了客服等交互功能。因此，想开发一个好的小程序，就必须注重用户体验，让用户在使用小程序的过程中真正感受到小程序区别于原生App的方便快捷。5、从公众号积累的影响力入手如今绝大部分企业都已经有了自己的公众号。用小程序获取用户，订阅号进行用户运营，进行二次转化，是利用小程序驱动营销的基本思路。如今，微信用户活跃数用户数已达8.06亿，微信成为了我们日常最重要的流量入口，微信小程序的出现为我们提供了跨平台传播的更多可能。要想利用小程序营销品牌，最关键是要做好小程序的服务，以及切准行业方向，这样可以保证有源源不断的流量，还可以获得精准的用户。app开发公司软捷科技：http://www.256app.com/News/2061.html本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。快乐的独角兽百家号最近更新：简介:你每天玩你推荐的各种手机硬件和软件给你作者最新文章相关文章

我要回帖

更多关于 微信小程序多点触控 的文章

 

随机推荐