微信小程序-bindtap等事件传参

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

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

详解这里写图片描述

这里写图片描述(以常见的tap点击事情为例)
wxml

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

Page({
  tapName: function(event) {
    console.log(event)
  }
})
Page({ tapName: function(event) { console.log(event) } })
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、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。

2、注意打印结果中target和currentTarget的区别。

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

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

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

### 微信小程序点击事件传递参数 在微信小程序中,为了实现在点击事件中传递参数的功能,可以利用`data-*`属性来绑定需要传递的参数。这种方式不同于Vue等框架可以直接在事件处理器内嵌入参数的做法。 对于按钮组件而言,在WXML文件里设置如下: ```html <button type="primary" bindtap="btnHandler" data-id="123456">点击我</button> ``` 上述代码片段展示了如何向按钮添加一个名为`data-id`的自定义属性,并赋予其特定值作为待传输的数据[^1]。 接着,在对应的JS逻辑层(即`.js`文件),可以通过`e.currentTarget.dataset.id`访问到这个被绑定上去的ID值: ```javascript Page({ btnHandler(e) { const id = e.currentTarget.dataset.id; console.log('接收到的id:', id); // 进一步处理... } }) ``` 此方法允许开发者轻松地将任何想要的信息附加给触发器元素并随后读取这些信息用于业务逻辑操作[^2]。 另外一种场景涉及到页面间的导航与参数携带。当从一个页面跳转至另一个新页面时,也可以通过URL查询字符串的形式附带额外数据。例如使用`wx.navigateTo()` API完成带有参数的页面切换: ```javascript wx.navigateTo({ url: '/pages/targetPage/targetPage?id=7890', }); ``` 而在目标页面接收该参数,则需借助于`onLoad`生命周期函数内的options对象来进行解析和应用[^3]。 ```javascript Page({ onLoad(options){ if (options && options.id){ this.setData({ receivedId: options.id }); console.log('接收到的目标页id:', this.data.receivedId); // 执行其他初始化工作... } }, // ...其余配置项 }) ``` 以上就是关于微信小程序中几种常见的点击事件传参方式及其具体实现的例子说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值