微信小程序bindtap的作用_小程序分享带参数

微信小程序bindtap的作用_小程序分享带参数之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap=’setNumber’,而不是bindtap=’setNumber(1)’,在js中只要写function(e

大家好,又见面了,我是你们的朋友全栈君。

之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap=’setNumber’,而不是bindtap=’setNumber(1)’,在js中只要写function(e).通过e可以获取所传过来元素的所有信息。

以下是我所百度的资料。

什么是事件

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。 
事件对象可以携带额外信息,如 id, dataset, touches。


这里写图片描述

这里写图片描述

看图,因为需要传递的数据比较多,所以我们通过dataset携带参数信息。如果只有一个参数,可以通过id来传递

详解(以常见的tap点击事情为例)

wxml

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
 
 
 
  • 1

JS

Page({ tapName: function(event) { console.log(event) }
})
 
 
 
  • 1
  • 2
  • 3
  • 4
  • 5

event 打印结果

{
"type":"tap",
"timeStamp":895,
/////////////////////////////////
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
///////////////////////////////
"detail": {
  "x":53,
  "y":14
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}
 
 
 
  • 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、注意打印结果中targetcurrentTarget的区别。

target 触发事件的源组件。 
currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。 
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。

说明

id传参和dataset类似,只是最后获取值的时候不同。event.currentTarget.id

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/125123.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 无线AP、WiFi、WLAN是什么关系?

    无线AP、WiFi、WLAN是什么关系?最近在看科技论文,有些基础知识不是很清楚,故作了解近年来,无线AP被越来越多的应用于商场、车站、机场等公共场所,已变得与我们的生活息息相关,成为社会发展的一个趋势。但许多人弄不清楚无线AP与WiFi、WLAN之间的关系,以为WiFi就是WLAN,它们之间到底有什么不同?公共WiFi其实是一种无线AP技术今年央视315晚会曝光的公共WiFi安全隐患引起了社会各界的关注,但是有一个细节需要值得注意,那…

    2022年7月11日
    70
  • 弹性布局和AndroidAutoSize屏幕适配

    弹性布局和AndroidAutoSize屏幕适配导言:技术在不断的革新,需要有新的技术代替老的方案,老的不再维护,新的一直推荐,作为技术也不能一直停滞不前概念:弹性布局(约束布局):ConstraintLayout可以算是RelativeLayout的升级版屏幕适配:百分比和最小宽度从px的AndroidAutoLayout方案到dp,pm等主副单位AndroidAutoSize方案案例步骤:1:ConstraintLayo…

    2022年6月3日
    34
  • 无法wget raw.githubusercontent.com

    无法wget raw.githubusercontent.com

    2021年6月3日
    297
  • onedrive免费版容量_onedrive永久1t申请

    onedrive免费版容量_onedrive永久1t申请1、打开:http://get365.pw在右上角可以看到临时邮箱的地址复制地址朋友们记得保存地址是登录的账号,(获得临时邮箱地址之后不要关闭页面等下还要获取验证码)2、然后打开https://signup.microsoft.com/signup?sku=student输入临时邮箱地址3、填写信息验证码(验证码打开临时邮箱的页面查看,第一步打开的那个界面,下方可以查看接收到的邮

    2022年9月10日
    0
  • 推荐几款好用的云笔记软件[通俗易懂]

    一直钟爱印象笔记,程序员的电脑上必装的软件,但最近期限到了,再也不能像以前无限制的上传文件,续费也比去年的只要九块九一年高出了很多倍,因此,注册试用了其他的笔记,发现云笔记众多,其中有几款很好用的云笔记,然后记录下来,推荐给大家。一:OneNote官网:http://www.onenote.com/描述:MicrosoftOneNote,是一套用于自由形式的信息获取以及多用户协作工具。…

    2022年4月15日
    215

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号