小程序：wx:for里面的item，index。以及自定义属性data-xxx的用法（双层循环取下标

封面图 • 2025-12-28 • 小程序

在微信小程序中，`<wx:for>` 是用于循环渲染列表的指令。它支持 `item` 和 `index` 两个变量来分别表示当前项和索引。此外，还可以通过 `data-xxx` 自定义属性传递数据到事件处理函数中。

---

## 一、基本用法：`wx:for` 中的 `item` 和 `index`

### 1. 单层循环

```html
<view wx:for="{{list}}" wx:key="index">
  {{index}}: {{item.name}}
</view>
```

- `{{list}}` 是一个数组（例如：`[ { name: 'A' }, { name: 'B' } ]`）
- `item` 表示当前项（如 `{ name: 'A' }`）
- `index` 表示当前项的索引（从 0 开始）

### 2. 自定义 `item` 和 `index` 名称

```html
<view wx:for="{{list}}" wx:for-item="myItem" wx:for-index="myIndex" wx:key="index">
  {{myIndex}}: {{myItem.name}}
</view>
```

---

## 二、`data-xxx` 的用法

`data-xxx` 是用于向事件处理函数传递自定义数据的。通常用于点击事件中传递当前项的信息。

### 示例：

```html
<view wx:for="{{list}}" wx:key="index" bindtap="handleTap" data-name="{{item.name}}" data-index="{{index}}">
  {{item.name}}
</view>
```

在 JS 中：

```javascript
Page({
  data: {
    list: [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Orange' }
    ]
  },
  handleTap(e) {
    console.log('name:', e.currentTarget.dataset.name);
    console.log('index:', e.currentTarget.dataset.index);
  }
})
```

---

## 三、双层循环取下标（外层 index + 内层 index）

假设你有一个二维数组，比如：

```javascript
data: {
  list: [
    [ 'A1', 'A2', 'A3' ],
    [ 'B1', 'B2', 'B3' ],
    [ 'C1', 'C2', 'C3' ]
  ]
}
```

### 1. 外层循环 + 内层循环

```html
<view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex">
  <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex">
    外层索引: {{outerIndex}}, 内层索引: {{innerIndex}} - 值: {{innerItem}}
  </view>
</view>
```

### 2. 使用 `data-xxx` 传递双层索引

```html
<view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex">
  <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex" 
        bindtap="handleInnerTap"
        data-outer-index="{{outerIndex}}"
        data-inner-index="{{innerIndex}}">
    {{innerItem}}
  </view>
</view>
```

JS 中：

```javascript
handleInnerTap(e) {
  const outerIndex = e.currentTarget.dataset.outerIndex;
  const innerIndex = e.currentTarget.dataset.innerIndex;
  console.log('外层索引:', outerIndex, '内层索引:', innerIndex);
}
```

---

## 四、注意事项

1. **`wx:key` 必须指定**，否则可能会出现渲染错误。
2. 如果是数组中的对象，建议使用唯一 ID 作为 key，而不是 `index`。
3. `data-xxx` 只能是字符串，如果需要传递数字或对象，可以转换成 JSON 字符串。

---

## 五、完整示例代码

### WXML:

```html
<view wx:for="{{list}}" wx:key="index" wx:for-item="outerItem" wx:for-index="outerIndex">
  <view wx:for="{{outerItem}}" wx:key="index" wx:for-item="innerItem" wx:for-index="innerIndex" 
        bindtap="handleInnerTap"
        data-outer-index="{{outerIndex}}"
        data-inner-index="{{innerIndex}}">
    {{innerItem}}
  </view>
</view>
```

### JS:

```javascript
Page({
  data: {
    list: [
      ['A1', 'A2', 'A3'],
      ['B1', 'B2', 'B3'],
      ['C1', 'C2', 'C3']
    ]
  },
  handleInnerTap(e) {
    const outerIndex = e.currentTarget.dataset.outerIndex;
    const innerIndex = e.currentTarget.dataset.innerIndex;
    console.log(`外层索引: ${outerIndex}, 内层索引: ${innerIndex}`);
  }
})
```

---

如果你有更具体的场景或代码问题，欢迎继续提问！