当前位置:网站首页>小程序事件绑定
小程序事件绑定
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-*自定义属性传参,*代表的是参数的名字
边栏推荐
- 信息学奥赛一本通 1340:【例3-5】扩展二叉树
- [quick start of Digital IC Verification] 6. Quick start of questasim (taking the design and verification of full adder as an example)
- Zero cloud new UI design
- Minimum commission for stock trading account opening, where to open an account with low commission? Is it safe to open an account on your mobile phone
- 港股将迎“最牛十元店“,名创优品能借IPO突围?
- ByteDance dev better technology salon was successfully held, and we joined hands with Huatai to share our experience in improving the efficiency of web research and development
- sort和投影
- Oracle-表空间管理
- Go language learning tutorial (16)
- 走入并行的世界
猜你喜欢
小程序页面导航
Station B up builds the world's first pure red stone neural network, pornographic detection based on deep learning action recognition, Chen Tianqi's course progress of machine science compilation MLC,
微信小程序正则表达式提取链接
.Net分布式事務及落地解决方案
IC科普文:ECO的那些事儿
JS implementation prohibits web page zooming (ctrl+ mouse, +, - zooming effective pro test)
Oracle tablespace management
【数字IC验证快速入门】2、通过一个SoC项目实例,了解SoC的架构,初探数字系统设计流程
死信队列入门(两个消费者,一个生产者)
解决Thinkphp框架应用目录下数据库配置信息修改后依然按默认方式连接
随机推荐
How to retrieve the root password of MySQL if you forget it
Introduction to dead letter queue (two consumers, one producer)
Oracle-表空间管理
ROS2专题【01】:win10上安装ROS2
A way to calculate LNX
Y57. Chapter III kubernetes from entry to proficiency -- business image version upgrade and rollback (30)
Leetcode skimming: binary tree 16 (path sum)
Document method
【数字IC验证快速入门】3、数字IC设计全流程介绍
ByteDance dev better technology salon was successfully held, and we joined hands with Huatai to share our experience in improving the efficiency of web research and development
【数字IC验证快速入门】8、数字IC中的典型电路及其对应的Verilog描述方法
618 "low key" curtain call, how can baiqiushangmei join hands with the brand to cross the "uncertain era"?
强化学习-学习笔记4 | Actor-Critic
Bzoj 3747 poi2015 kinoman segment tree
走入并行的世界
C langue OJ obtenir PE, ACM démarrer OJ
Mysql频繁操作出现锁表问题
[quick start of Digital IC Verification] 9. Finite state machine (FSM) necessary for Verilog RTL design
ICTCLAS用的字Lucene4.9捆绑
港股将迎“最牛十元店“,名创优品能借IPO突围?