微信小程序之触控事件 (四)

本贴最后更新于 2566 天前,其中的信息可能已经沧海桑田

【未经作者本人同意,请勿以任何形式转载】

》》》什么是事件

  • 事件是视图层到逻辑层的通讯方式。

  • 事件可以将用户的行为反馈到逻辑层进行处理。

  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。

  • 事件对象可以携带额外信息,如 id, dataset, touches。

》》》事件分类

  • touchstart 手指触摸

  • touchmove 手指触摸后移动

  • touchcancel 手指触摸动作被打断,如弹窗和来电提醒

  • touchend 手指触摸动作结束

  • tap 手指触摸后离开

  • longtap 手指触摸后后,超过 350ms 离开

》》》事件绑定

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

  • key 以 bind 或 catch 开头,然后跟上事件的类型,如 bindtap, catchtouchstart

  • value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind 事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡。

上面简单介绍了小程序事件基础,是时候彰显"事件"的威力:

  • 单击(tap)

  • 双击(dbtap)

  • 长按(longtap)

  • 滑动

  • 多点触控

1.单击

单击事件由 touchstart、touchend 组成,touchend 后触发 tap 事件。

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧button>
<view>
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')
}

2.双击

双击事件由两个单击事件组成,两次间隔时间小于 300ms 认为是双击;微信官方文档没有双击事件,需要开发者自己定义处理。

<view>
  <button type="primary" bindtap="mytap">点我吧button>
view>

3.长按

长按事件手指触摸后,超过 350ms 再离开。

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
    bindtouchend="mytouchend" bindtap="mytap">点我吧button>
view>
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 |

4.滑动

手指触摸屏幕并移动,为了简化起见,下面以水平滑动和垂直滑动为例。 滑动事件由 touchstart、touchmove、touchend 组成

坐标图:

  1. 以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕,Y 轴越往下坐标值越大(注意跟数学象限的区别)。

  2. 假设 A 点为 touchstart 事件触摸点,坐标为 A(ax,ay),然后手指向上滑动到点 B(bx,by),就满足条件 by < ay;

  3. 同理,向右滑动到 C(cx,cy),满足 cx > ax;向下滑动到 D(dx,dy),满足 dy > ay;向左移动到 E(ex,ey)满足 ex < ax.

  4. 计算线段 AB 在 Y 轴上投影长度为 m,在 X 轴上的投影长度为 n

  5. 计算 r = m/n,如果 r > 1,视为向上滑动。

  6. 同理计算线段 AC,AD,AE 在 Y 轴投影长度与 X 轴的投影长度之比,得出向右向下向左的滑动。

以上没考虑 r 为 1 的情况。

<view>
  <button type="primary"  bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧button>
view>

5.多点触控

由于模拟器尚不支持多点触控,内测开放后,继续补充。

你也可以关注我的微信公众号『ITNotes』, 一起交流学习 。

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...