微信小程序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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 矩阵求逆 c语言_求矩阵各列的平均值C语言

    矩阵求逆 c语言_求矩阵各列的平均值C语言#include#defineN10intgetA(intarcs[N][N],intn)//按第一行展开计算|A|{ if(n==1) { returnarcs[0][0]; } intans=0; inttemp[N][N]; int

    2022年8月21日
    8
  • Badboy录制提示脚本错误解决方案

    Badboy录制提示脚本错误解决方案昨天学习 JMeter 顺带用了一下 badboy 录制的时候总是提示脚本错误 用着不爽死了 于是找了很多方法 如下 更新 AdobeFlashPl 浏览器 找到工具 Internet 选项 高级 取消禁止脚本调试复选框我的电脑 属性 高级 错误报告很可惜 全部以失败告终说了一堆废话 切入正题 在临下班之际终于找到了解决方法 如下 bad

    2025年11月17日
    3
  • BigDecimal加减乘除运算(转)[通俗易懂]

    BigDecimal加减乘除运算(转)[通俗易懂]java.math.BigDecimal。BigDecimal一共有4个够造方法,让我先来看看其中的两种用法:第一种:BigDecimal(doubleval)TranslatesadoubleintoaBigDecimal.第二种:BigDecimal(Stringval)Transla…

    2022年6月2日
    43
  • Oracle number数据类型的使用[通俗易懂]

    Oracle number数据类型的使用[通俗易懂]需要首先明白有效位的含义:从左到右,从第一个不为零的数开始计数第一种情况:number后面都是两个正数,第一个数表示有效位,第二个数表示小数点后的位数(也就是精确度,需要进行四舍五入)例如number(2,1)存入的数据有1,0.1,1.666分析过程:存入1:要求有效位小于等于2,所以自动补充0,存入1实际上判断的是1.0是否符合条件,自然可以添加存入0….

    2022年7月24日
    10
  • StretchBlt用法[通俗易懂]

    StretchBlt用法[通俗易懂]首先定义protected: BITMAPbmp;其次实现///////////////////////////////////////////////////////////////////////////////CExamineViewdrawingvoidCExamineView::OnDraw(CDC*pDC){ CExamineDoc*pDoc=GetDo

    2025年6月13日
    3
  • python 文件路径名,文件名,后缀名的操作

    python 文件路径名,文件名,后缀名的操作需要使用路径名来获取文件名,目录名,绝对路径等等。使用os.path模块中的函数来操作路径名。下面是一个交互式例子来演示一些关键的特性:对于任何的文件名的操作,你都应该使用os.path模块,

    2022年7月5日
    27

发表回复

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

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