小程序进行事件传参的时候,除了使用 data-*属性 传递参数外,还可以 使用 mark 标记传递参数
mark 是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的 target 节点。同时 mark 还可以用于承载一些自定义数据
在组件上使用 mark:自定义属性 的方式将数据传递给事件处理函数
例如: <view mark:id="100" bindtap="handler" />
然后通过事件对象进行获取自定义数据
可按照以下代码复制尝试:
html
<!--pages/cart/cart.wxml-->
<view bindtap="parentHandler" mark:parentid="1" mark:parentname="tom">
<!-- 如果需要使用 mark 进行事件穿参数,需要使用 mark: 自定义属性的方式进行参数传递 -->
<!-- <button bindtap="btnHandler" mark:id="1" mark:name="tom">按钮</button> -->
<button mark:id="1" mark:name="tom">按钮</button>
</view>
javascript
// pages/cart/cart.js
Page({
// 按钮绑定的事件处理函数
btnHandler (e) {
console.log(e.mark.id)
console.log(e.mark.name)
},
parentHandler (e) {
// 先点击蓝色区域(不点击按钮)
// 通过事件对象获取的是 view 身上绑定的数据
// 先点击按钮(不点击蓝色区域)
// 通过事件对象获取到的是触发事件的节点 以及 父节点身上所有的 mark 数据
console.log(e)
}
})
css
/* pages/cart/cart.wxss */
view {
display: flex;
height: 300rpx;
background-color: rgb(231, 116, 22);
align-items: center;
}