小程序中使用data-*自定义属性

下面分基础用法、命名规则、取值、实战案例、常见坑完整讲解，结合你删除行的场景举例，上手即用。

一、基本语法

在 WXML 标签上添加 data-前缀名="值"，格式：

<标签 bind事件="回调函数" data-自定义名="数据"></标签>

• data- 是固定前缀，必须写
• data- 后面自定义名称，建议小写、用短横线分隔多单词
• 值可以是固定文本、{{ 变量 }} 动态数据

---

二、命名 & 自动转换规则（重点）

小程序会把 data-* 自动解析到 dataset 对象，规则：

1. 单段名称（无短横线）
   WXML：data-id="100"
   JS 取值：dataset.id（名称不变）

2. 多单词用 - 连接 → 自动转小驼峰
   WXML：data-row-id="2"、data-user-name="张三"
   JS 取值：dataset.rowId、dataset.userName

   原理：去掉横线，横线后第一个字母转为大写

3. ❌ 禁止写法

   • 不要用大写：data-Id 会被强制转小写，易混乱
   • 不要用下划线/冒号：data_row_id / data:rowid 不规范
   • 不要连续横线：data-row--id 解析异常

---

三、取值方式（核心）

触发点击/触摸等事件后，在事件回调函数中通过 事件对象 e 获取：

• 标准写法：e.currentTarget.dataset.属性名
• 不推荐：e.target.dataset.属性名（嵌套标签会失效）

原因

currentTarget：绑定事件的标签本身（永远稳定）
target：实际点击到的最内层标签（你这里点击图片，target 会变成 <image>，拿不到数据）

---

四、完整实战示例（分 3 种场景）

场景1：单个自定义属性（基础用法）

WXML

<!-- 绑定点击事件 + 单个data属性 -->
<view bind:tap="tapItem" data-id="1001">点击我</view>

JS

Page({
  tapItem(e) {
    // 取值
    const id = e.currentTarget.dataset.id;
    console.log('获取到ID：', id); // 输出 1001
  }
})

场景2：多个自定义属性（你的删除场景）

结合你的删除按钮，传 数据ID + 数组下标

WXML

<!-- 两个 data-* 属性，动态绑定变量 -->
<view class="delete" bind:tap="doDeleteRow" 
      data-nid="{{row.id}}" 
      data-index="{{index}}">
  <image src="/images/othe/deleter.png" mode="widthFix" />
</view>

JS

Page({
  doDeleteRow(e) {
    // 一次性取出多个属性
    const nid = e.currentTarget.dataset.nid;
    const index = e.currentTarget.dataset.index;
    
    console.log('要删除的数据ID：', nid);
    console.log('当前数组下标：', index);
  }
})

场景3：多单词名称（短横线分隔 → 转小驼峰）

WXML

<view bind:tap="test" data-row-id="3" data-user-name="测试">
  测试驼峰转换
</view>

JS

test(e) {
  // data-row-id → rowId
  const rowId = e.currentTarget.dataset.rowId;
  // data-user-name → userName
  const userName = e.currentTarget.dataset.userName;

  console.log(rowId, userName); // 3 "测试"
}

---

五、结合业务：删除功能完整可运行代码

1. WXML 列表 + 删除按钮

<!-- 循环列表 -->
<view wx:for="{{list}}" wx:key="id">
  <view>
    <text>{{list.name}}</text>
    <!-- 删除按钮，传递 id 和 下标 -->
    <view bind:tap="doDeleteRow" data-nid="{{list.id}}" data-index="{{index}}">
      删除
    </view>
  </view>
</view>

2. JS 逻辑（取值 + 调用接口 + 前端删除）

Page({
  data: {
    list: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' }
    ]
  },

  // 删除点击事件
  doDeleteRow(e) {
    // 1. 从data-* 取值
    const delId = e.currentTarget.dataset.nid;
    const delIndex = e.currentTarget.dataset.index;

    wx.showModal({
      title: '确认删除',
      success: res => {
        if (res.confirm) {
          // 2. 调用后端删除接口
          wx.request({
            url: '你的后端删除接口地址',
            method: 'DELETE',
            data: { id: delId },
            success: res => {
              // 3. 前端移除对应行，刷新页面
              let arr = this.data.list;
              arr.splice(delIndex, 1); // 从下标开始删除1项
              this.setData({ list: arr });
              wx.showToast({ title: '删除成功' });
            }
          })
        }
      }
    })
  }
})

---

六、高频避坑总结

1. 优先使用 e.currentTarget 取值
   标签嵌套（view 包含 image/text）时，e.target 大概率拿不到 dataset。

2. 命名规范
   统一用 data-小写单词，多单词用 - 分隔，不要写大写、下划线。

3. 不要在标签内重复同名 data-*
   同一标签多个同名属性，后面的值会覆盖前面。

4. 值支持动态绑定
   data-id="{{变量}}" 可以正常解析，是列表传参最常用的方式。

5. dataset 里的数据全部为字符串类型
   如果需要数字，手动转换：let num = Number(delId)。