微信小程序中事件
程序员文章站
2022-05-18 21:54:17
微信小程序中事件 一.常见的事件有 | 类型 | 触发条件 | 最低版本 | | | | | | touchstart | 手指触摸动作开始 | | | touchmove | 手指触摸后移动 | | | touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | | | touchend ......
微信小程序中事件
一.常见的事件有
类型 | 触发条件 | 最低版本 |
---|---|---|
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 设备,重按时会触发 |
有两个注意点:
touchcancle: 在某些特定场景下才会触发(比如来电打断等)
tap事件和longpress事件通常只会触发其中一个
二.书写方式
页面中
不需要传参的事件
<!--写法一 bind事件名='函数名' --> <button bindtap="fuck">点我</button> <!--写法一 bind:事件名='函数名' -->
需要传参的事件
<!-- 点击传参data-传过去的key='变量值' --> <button bindtap="fuck_1" data-name="ywy">传参</button> <!-- 点击传变量data-传过去的key='{{变量名}}' --> <button bindtap="fuck_2" data-number='{{a}}'>{{a}}</button>
js文件中
fuck:function(){ console.log('1111111') }, fuck_1: function (data) { console.log(data) }, fuck_2: function (e) { console.log(e) },
三.有传参的事件取值
事件传递参数
当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过
data-属性来完成:
1 格式:data-属性的名称
2 获取:e.currenttarget.dataset.属性的名称
currenttarget和target的区别
这个区别普通的标签看不出来,但是一旦有标签的父标签页有一个事件时候,这时候就有区别,currenttarget指向的是本身的函数调用传的参数,而target不是
四.传参和定义变量之间的操作
页面中js func:function(e){ this.setdata({ 变量名:this.data.变量名++ }) },