微信小程序中事件
2024-09-01 03:29:36
微信小程序中事件
一.常见的事件有
| 类型 | 触发条件 | 最低版本 |
|---|---|---|
| touchstart | 手指触摸动作开始 | |
| touchmove | 手指触摸后移动 | |
| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 | |
| touchend | 手指触摸动作结束 | |
| tap | 手指触摸后马上离开 | |
| longpress | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 | 1.5.0 |
| 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.变量名++
})
},
最新文章
- 开源BTS产品中存在多处漏洞，攻击者或可劫持手机通讯基站
- 在IOS手机safari浏览器的无痕模式下，localStorage不起作用
- hive中的一些参数
- CISCO动态VLAN配置
- maven 控制台乱码
- Python 计算程序运行时间
- SignalR 2.0入门
- Time.deltaTime 含义和应用
- HTTP 304 Response
- Away3D基础之摄像机
- pthread_rwlock_t读写锁函数说明
- 区间dp-zoj3541-The Last Puzzle
- mysql内连接的复杂应用
- Android-Async-Http 特性简单分析
- [OPEN CV] 常用视频操作方法
- asp.net/wingtip/显示数据和详细信息
- 怎么让self.view的Y从navigationBar下面开始计算
- logrotate-日志切割示例
- 浅析原生js模仿addclass和removeclass
- Java学习--数组与方法