码迷,mamicode.com
首页 > 微信 > 详细

小程序04-事件绑定

时间:2020-06-26 19:52:34      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:width   order   定义   span   HERE   迭代   回调   绑定   func   

事件分类

事件分为冒泡事件和非冒泡事件:

  1. 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  2. 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

WXML的冒泡事件列表:

类型

触发条件

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

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

touchend

手指触摸动作结束

tap

手指触摸后马上离开

longpress

手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发

longtap

手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend

会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart

会在一个 WXSS animation 动画开始时触发

animationiteration

会在一个 WXSS animation 一次迭代结束时触发

animationend

会在一个 WXSS animation 动画完成时触发

touchforcechange

在支持 3D Touch 的 iPhone 设备,重按时会触发

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form submit事件,input input事件,scroll-view scroll事件

 

普通事件绑定

事件绑定的写法类似于组件的属性,可以使用bind进行绑定,如:

<view bindtap="handleTap"> Click here! </view>

 

绑定并阻止事件冒泡

除 bind 外,也可以用 catch 来绑定事件。与 bind 不同, catch 会阻止事件向上冒泡。

<view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view>

 

.wxml文件

 1 <view>利用bindinput和this.setData实现双向绑定</view>
 2 <input type="digit" placeholder="请输入数字" bindinput="handleInput" value="{{num}}"/>
 3 
 4 <view>model:value双向绑定语法</view>
 5 <!-- 设置type="digit",只会弹出有小数点的键盘 -->
 6 <input type="digit" placeholder="请输入数字" model:value="{{num}}"/>
 7 
 8 <button bindtap="handleTap" data-opnum="{{1}}">+</button>
 9 <button bindtap="handleTap" data-opnum="{{-1}}">-</button>
10 <view>
11   结果:{{num}}
12 </view>

 

.js文件

Page({
  data: {
    num:0
  },

  // 输入框input事件的执行逻辑
  handleInput: function(e){
    this.setData({
      num:e.detail.value
    })
  },
  // 加减按钮点击事件
  handleTap(e){
    // 1.获取自定义属性opnum
    const opnum = e.currentTarget.dataset.opnum;
    this.setData({
      num: Number(this.data.num) + Number(opnum)
    })
  },
})

 

 

 

小程序04-事件绑定

标签:width   order   定义   span   HERE   迭代   回调   绑定   func   

原文地址:https://www.cnblogs.com/xufcs/p/13195935.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!