小程序组件---触控事件

常见的事件类型

在这里插入图片描述
注意:touch触屏系列事件常结合画布canvas组件使用

事件绑定的写法同组件的属性,以 key、value 的形式

①key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtap等。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart
②value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错
③bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡

(1)触控事件之单击tap

单击事件由touchstart、touchend组成,touchend后触发tap事件。
在这里插入图片描述
**

单击事件tap的验证:

**
在这里插入图片描述在这里插入图片描述在这里插入图片描述

tap顺序为touchstart→touchend→tap

(2)触控事件之双击

双击事件可以由两个单击事件组成,只要两次点击的间隔时间小于600ms(或者300ms)则认为是双击行为;
双击执行顺序为touchstart > touchend >tap > touchstart >touchend >tap

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
此时如果点击按钮的时间间隙小于600ms,则会认为是双击行为

(3)触控事件之长按longtap

长按事件手指触摸后,超过350ms再离开,触发长按事件longtap
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
翻译为:“\longtap\”事件已弃用,请改用“longpress”事件,所以接下来将longtap改为longpress
**

触发顺序:touchstart >longtap >touchend >tap

(4)触控事件之长按longpress

总结:
验证后发现,longpress长按事件已经避免了旧版longtap事件与tap事件同时触发的bug,所以以后开发用longpress解决长按事件即可。

**
在这里插入图片描述

(5)触控事件之滑动touch系列

滑动事件由touchstart、touchmove、touchend组成,一般指的是手指触摸屏幕并移动
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
坐标轴及业务逻辑分析:
①假设A点为touchstart事件触摸点,坐标为A(ax,ay),然后手指向上滑动到点B(bx,by),就满足条件by < ay
②同理,向右滑动到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轴的投影长度之比,得出向右向下向左的滑动

初始化数据
在这里插入图片描述
开始触摸在这里插入图片描述
触摸点移动,动态计算判断方向
在这里插入图片描述


版权声明:本文为ActiveQi原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。