精华

小程序基础篇之触控事件

  • • 发表于 4年前
  • • 作者 JeremyLu
  • • 9193 人浏览
  • • 19 条评论
  • • 最后编辑时间 4年前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

》》》什么是事件(官方文档)

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如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" bindtap="mytap">点我吧</button>
</view>
mytap: function(e){
    console.log(e.timeStamp + '- tap')
}

2.双击

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

<view>
  <button type="primary" bindtap="mytap">点我吧</button>
</view>
//触摸事件,判断单击还是双击
mytap: function(e){
    var curTime = e.timeStamp;
    var lastTime = this.data.lastTapDiffTime;
    if(lastTime > 0){
      //如果两次单击间隔小于300毫秒,认为是双击
      if(curTime - lastTime < 300){
        console.log(e.timeStamp + '- db tap')
      }else{
        console.log(e.timeStamp + '- tap')
      }
    }else{
      console.log(e.timeStamp + '- first tap')
    }
    this.setData({lastTapDiffTime: curTime});
}

3.长按

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

<view>
  <button type="primary" bindlongtap="mylongtap">点我吧</button>
</view>
//长按事件
mylongtap: function(e){
   console.log(e.timeStamp + '- long tap')
}

单击、双击、长按属于点触事件,会触发touchstart、touchend、tap事件;touchcancel事件在真机方便测试,这里就不多说了。

事件 触发顺序
单击 touchstart → touchend → tap
双击 touchstart → touchend → tap → touchstart → touchend → tap
长按 touchstart → longtap → touchend → tap

4.滑动
目前官方没有提供左右滑事件,复杂的手势(多点旋转、多点缩放,多点平移)也需要我们自己通过代码实现。

5.多点触控
多点触控,只有在真机条件下才可测试,已测试。
@Roluce 童鞋已经发帖讲述了,详见新手必‘晕’的changedTouches,您肯定不知道的!(框架细节十二)

以上简单的介绍小程序的基本事件类型和使用,复杂的手势控制可以有多个基本触控事件组合而成。后面篇章还会继续深入学习事件冒泡、通过绑定事件传参数、复杂手势控制实现。

分享到:
评论区(共19条评论)
19条评论
Ctrl+Enter
作者

JeremyLu

JeremyLu

APP:1 帖子:19 回复:189 积分:627

已加入社区[1344]天

我就是我不一样的烟火

作者详情》
Top