微信小程序(触控事件)

事件简介
①本质:事件是视图层到逻辑层的通讯方式。
②作用:事件可以将用户的行为反馈到逻辑层进行处理。
③应用:事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
④参数:事件对象可以携带额外信息,如id,dataset,touches

事件类型
在编写代码中,使用频率高的事件方式是:

  1. 单击:tap
  2. 长按:longtap
  3. 滑动:touchstart、touchmove、touchend、touchcancel

常见的事件类型:
在这里插入图片描述
注意:touch触屏系列事件常结合画布canvas组件使用,简单了解即可。

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

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

案例:(bindtap和catchtap的区别)

<view class="parent" bindtap="parentFn">
  <view class="child" catchtap="childFn"></view>
</view>
.parent{
  width: 100%;
  height: 200rpx;
  background: palegreen;
}
.child{
  width: 200rpx;
  height: 200rpx;
  background: greenyellow;
}
 parentFn(){
    console.log("父级")
  },
  childFn()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值