微信小程序开发 - 为 tap 事件的处理函数传递数据

为 tap 事件的处理函数传递数据

1、基本介绍

• 在微信小程序中，为 tap 事件的处理函数传递数据，主要通过在组件上设置 data-* 自定义属性来实现

1. 传递的数据存储在 event.currentTarget.dataset 对象中，currentTarget 指向事件绑定的当前组件

2. 在 WXML 中，属性名写作短横线形式（例如，data-item-id），在 JS 中获取时，会自动转换为驼峰形式（例如，itemId）

2、演示

<view bindtap="handleTap" data-user-id="{{123}}" data-user-role="admin">点击我</view>

Page({
  handleTap(event) {
    const userId = event.currentTarget.dataset.userId;
    const userRole = event.currentTarget.dataset.userRole;
    console.log("userId:", userId);
    console.log("userRole:", userRole);
  },
});

3、常见错误

1. 写作 bindtap="handleTap(123)"，小程序会将整个 "handleTap(123)" 当作一个函数名去查找，导致报错

<view bindtap="handleTap(123)">点击我</view>

Page({
  handleTap(data) {
    console.log("data:", data);
  },
});

Component "pages/mytest/index" does not have a method "handleTap(123)" to handle event "tap".

2. 在 WXML 中使用大写，写作 data-itemId="{{1}}"，大写字母会被转为小写，导致 dataset.itemid 存在，而 dataset.itemId 为 undefined

<view bindtap="handleTap" data-itemId="{{1}}">点击我</view>

Page({
  handleTap(event) {
    const itemId = event.currentTarget.dataset.itemId;
    console.log("itemId:", itemId);

    const itemid = event.currentTarget.dataset.itemid;
    console.log("itemid:", itemid);
  },
});

itemId: undefined
itemid: 1