当前位置:网站首页>小程序事件绑定
小程序事件绑定
2022-07-05 20:19:00 【'wx】
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
2.小程序常用事件
类型 | 绑定方式 | 事件描述 |
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于 HTML 中的 click 事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变时触发 |
3.事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象event,它的详细属性如下
属性 | 类型 | 说明 |
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
4.target和currentTarget的区别
target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件
5.bindtap语法格式
通过bindtap为组件绑定tap触摸事件
<button bindtap="btnGet">发起get请求</button>
在页面的.js文件中定义对应的事件处理函数,时间参数通过形参event(一般简写成e)来接受:
btnGet() {
wx.request({
url: 'https://applet-base-api-t.itheima.net/api/get',
method: 'GET',
data: {
name: 'xiaoming',
age: 12
},
success: (res) => {
console.log(res.data)
}
})
},
6.在事件处理函数中为data中的数据赋值
this.setData({
canIUseGetUserProfile: true
})
7.事件传参
通过组件提供的data-*自定义属性传参,*代表的是参数的名字
边栏推荐
- 走入并行的世界
- CCPC 2021威海 - G. Shinyruo and KFC(组合数,小技巧)
- E. Singhal and Numbers(质因数分解)
- 微信小程序正则表达式提取链接
- 零道云新UI设计中
- Rainbond 5.7.1 支持对接多家公有云和集群异常报警
- Go language learning tutorial (16)
- 【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
- How to choose a good external disk platform, safe and formal?
- [quick start of Digital IC Verification] 3. Introduction to the whole process of Digital IC Design
猜你喜欢
随机推荐
股票开户哪里好?网上客户经理开户安全吗
CCPC 2021威海 - G. Shinyruo and KFC(组合数,小技巧)
C language OJ gets PE, OJ of ACM introduction~
【数字IC验证快速入门】1、浅谈数字IC验证,了解专栏内容,明确学习目标
物联网智能家居基本方法实现之经典
[Yugong series] go teaching course in July 2022 004 go code Notes
mongodb文档间关系
强化学习-学习笔记4 | Actor-Critic
无卷积骨干网络:金字塔Transformer,提升目标检测/分割等任务精度(附源代码)...
How to retrieve the root password of MySQL if you forget it
mongodb基操的练习
.Net分布式事務及落地解决方案
《乔布斯传》英文原著重点词汇笔记(十二)【 chapter ten & eleven】
Ffplay document [easy to understand]
Informatics Olympiad 1340: [example 3-5] extended binary tree
【愚公系列】2022年7月 Go教学课程 004-Go代码注释
Is it safe for CICC fortune to open an account online?
Solve the problem that the database configuration information under the ThinkPHP framework application directory is still connected by default after modification
Model method
Document method