微信小程序之bindtap事件传参
来源:互联网 发布:淘宝客服旺旺如何设置 编辑:程序博客网 时间:2024/06/05 13:23
之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息。
以下是我所百度的资料。
什么是事件
事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id, dataset, touches。
看图,因为需要传递的数据比较多,所以我们通过dataset携带参数信息。如果只有一个参数,可以通过id来传递
详解(以常见的tap点击事情为例)
wxml
- 1
JS
- 1
- 2
- 3
- 4
- 5
event 打印结果
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
注意两点:
1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。
2、注意打印结果中target和currentTarget的区别。
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。
说明
id
传参和dataset
类似,只是最后获取值的时候不同。event.currentTarget.id
- 微信小程序之bindtap事件传参
- 微信小程序-bindtap等事件传参
- 微信小程序事件 bindtap @import 修改js
- 微信小程序,bindtap事件遇上bindtouchend事件,bindtouchend事件先触发
- 微信小程序--长按事件bindlongtap与点击事件bindtap的冲突
- 微信小程序bindlongtap触发bindtap问题
- 微信小程序 视图控件与bindtap之间的问题
- 小程序 view使用bindtap传值问题
- 【小程序】关于bindtap传值
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
- 微信小程序之绑定点击事件
- JS事件-事件处理程序之IE事件处理程序
- JS事件--事件处理程序之HTML事件处理程序
- JS事件--事件处理程序之DOM2事件处理程序
- 小程序WXML之事件
- 小程序之用户事件
- 微信小程序开发之拖拽 image 触摸事件监听
- 微信小程序开发之拖拽 image 触摸事件监听
- virtualbox设置桥接网络
- NOIP2012提高组Day2
- Python实战项目(一)使用API
- linux自动备份mysql
- gradient
- 微信小程序之bindtap事件传参
- R语言编码问题
- Java 抽象类
- Android NDK入门
- 内存虚拟化技术,具体的实现方法有哪两种?
- Java 基础夯实系列上线预告
- JAVA面向对象练习05第三种
- Leetcode 190. Reverse Bits
- Maven集成p3c-pmd