当前位置:网站首页>小程序事件绑定
小程序事件绑定
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-*自定义属性传参,*代表的是参数的名字
边栏推荐
- 如何形成规范的接口文档
- 14. Users, groups, and permissions (14)
- 【数字IC验证快速入门】6、Questasim 快速上手使用(以全加器设计与验证为例)
- 港股将迎“最牛十元店“,名创优品能借IPO突围?
- Leetcode brush question: binary tree 14 (sum of left leaves)
- 本季度干货导航 | 2022年Q2
- Mongodb basic exercises
- Introduction to dead letter queue (two consumers, one producer)
- Ffplay document [easy to understand]
- leetcode刷题:二叉树10(完全二叉树的节点个数)
猜你喜欢
解决Thinkphp框架应用目录下数据库配置信息修改后依然按默认方式连接
Leetcode brush questions: binary tree 18 (largest binary tree)
Zero cloud new UI design
How to select the Block Editor? Impression notes verse, notation, flowus
微信小程序正则表达式提取链接
[quick start of Digital IC Verification] 7. Basic knowledge of digital circuits necessary for verification positions (including common interview questions)
【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
14、Transformer--VIT TNT BETR
ROS2专题【01】:win10上安装ROS2
[quick start to digital IC Verification] 8. Typical circuits in digital ICs and their corresponding Verilog description methods
随机推荐
Oracle-表空间管理
字节跳动Dev Better技术沙龙成功举办,携手华泰分享Web研发效能提升经验
强化学习-学习笔记4 | Actor-Critic
死信队列入门(两个消费者,一个生产者)
2022北京眼睛健康用品展,护眼产品展,中国眼博会11月举办
Notes on key vocabulary in the English original of the biography of jobs (12) [chapter ten & eleven]
插值查找的简单理解
Unity编辑器扩展 UI控件篇
怎么挑选好的外盘平台,安全正规的?
【c语言】快速排序的三种实现以及优化细节
ffplay文档[通俗易懂]
Leetcode brush questions: binary tree 18 (largest binary tree)
Y57. Chapter III kubernetes from entry to proficiency -- business image version upgrade and rollback (30)
Oracle tablespace management
Mongodb/ document operation
全国爱眼教育大会,2022第四届北京国际青少年眼健康产业展会
[C language] merge sort
. Net distributed transaction and landing solution
[quick start of Digital IC Verification] 1. Talk about Digital IC Verification, understand the contents of the column, and clarify the learning objectives
Convolution free backbone network: Pyramid transformer to improve the accuracy of target detection / segmentation and other tasks (with source code)