小程序29-事件穿参-mark 自定义数据

Mr.Liu62025-04-02 13:36

小程序进行事件传参的时候，除了使用 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;
}