0
点赞
收藏
分享

微信扫一扫

微信小程序-小程序事件绑定

什么是事件

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

常见事件

  • tap:手指触摸后马上离开
  • longpress:手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
  • touchstart:手指触摸动作开始
  • touchmove:手指触摸后移动
  • touchcancel:手指触摸动作被打断,如来电提醒,弹窗
  • touchend:手指触摸动作结束

如何绑定事件

bind:绑定冒泡事件
capture-bind:绑定捕获事件
catch:阻止冒泡事件
capture-catch:阻止捕获事件

绑定事件示例:

index.wxml:

<view bind:tap="onTap">我是bind</view>
<view capture-bind:tap="onCaptureBind">我是capture-bind</view>
<view catch:tap="onCatch">我是catch</view>
<view capture-catch:tap="onCaptureCatch">我是capture-catch</view>

index.js:

onTap: function(){
  console.log('onTap call');
},
onCaptureBind: function(){
  console.log('onCaptureBind call');
},
onCatch: function(){
  console.log('onCatch call');
},
onCaptureCatch: function(){
  console.log('onCaptureCatch call');
},

常见事件示例:

index.wxml:

<view bind:tap="onTap">手指触摸后马上离开</view>
<view bind:longpress="onLongpress">手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发</view>
<view bind:touchstart="onTouchstart">手指触摸动作开始</view>
<view bind:touchmove="onTouchmove">手指触摸后移动</view>
<view bind:touchend="onTouchend">手指触摸动作结束</view>

index.js:

onTap: function(){
  console.log('onTap call');
},
onLongpress: function(){
  console.log('onLongpress call');
},
onTouchstart: function(){
  console.log('onTouchstart call');
},
onTouchmove: function(){
  console.log('onTouchmove call');
},
onTouchend: function(){
  console.log('onTouchend call');
},

!> touchcancel:手指触摸动作被打断,如来电提醒,弹窗

index.wxml:

<view bind:touchcancel="onTouchcancel">手指触摸动作被打断,如来电提醒,弹窗</view>

index.js:

onTouchcancel: function(){
  console.log('onTouchcancel call');
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  setTimeout(()=>{
    wx.showModal({
      title: '我是弹窗',
      content: '我是弹窗内容'
    });
  }, 3000);
},

我这里使用了弹窗来进行模拟触摸被打断,编译好了代码点击页面的view,然后等待定时器3s,会发现弹窗出来了,我们的打断方法回调就被执行了。



举报

相关推荐

0 条评论