标签:width order 定义 span HERE 迭代 回调 绑定 func
事件分类
事件分为冒泡事件和非冒泡事件:
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) }) }, })
标签:width order 定义 span HERE 迭代 回调 绑定 func
原文地址:https://www.cnblogs.com/xufcs/p/13195935.html