微信小程序 - 条件渲染（wx:if、hidden）与列表渲染（wx:for）-四、列表渲染

时间：2025-03-01 07:41:56
1、基本介绍
  • wx:for 根据数组或对象循环渲染组件
<view wx:for="{{【array】}}">
  {{index}}: {{item}}
</view>

<view wx:for="{{【object】}}">
  {{index}}: {{item}}
</view>
参数 说明
array / object 需要循环的数组 / 对象
item 当前循环项（默认名称）
index 当前循环项的索引（默认名称）
2、演示
  1. 数组列表渲染
<view wx:for="{{fruits}}">
  {{index + 1}}. {{item}}
</view>

Page({
  data: {
    fruits: ['苹果', '香蕉', '橙子']
  }
});
  1. 对象列表渲染
<view wx:for="{{list}}">
  {{item.id}} - {{item.name}}
</view>

Page({
  data: {
    list: [
      { id: 1, name: '小明' },
      { id: 2, name: '小红' },
      { id: 3, name: '小刚' }
    ]
  }
});
  1. 嵌套列表渲染
<view wx:for="{{classes}}">
  <text>{{item.name}} 班学生：</text>
  <view wx:for="{{item.students}}">
    {{index + 1}}. {{item}}
  </view>
</view>

Page({
  data: {
    classes: [
      {
        name: '一年级',
        students: ['小明', '小红']
      },
      {
        name: '二年级',
        students: ['小刚', '小丽']
      }
    ]
  }
});
3、自定义变量名
（1）基本介绍

  1. 可以通过 wx:for-item 自定义当前循环项变量名

  2. 可以通过 wx:for-index 自定义当前循环项的索引变量名

<view wx:for="{{【array / object】}}" wx:for-item="【currentItem】" wx:for-index="【currentIndex】">
  {{【currentIndex】}}: {{【currentItem】}}
</view>
（2）演示
<view wx:for="{{fruits}}" wx:for-item="fruit" wx:for-index="i">
  {{i + 1}}. {{fruit}}
</view>

Page({
  data: {
    fruits: ['苹果', '香蕉', '橙子']
  }
});
4、wx:key
（1）基本介绍
  • wx:key 用于指定列表中每个项的唯一标识符，以提高渲染性能
<view wx:for="{{【array】}}" wx:key="【key】">
  {{index}}: {{item}}
</view>

<view wx:for="{{【object】}}" wx:key="【key】">
  {{index}}: {{item}}
</view>
（2）适用场景

  1. wx:key 的适用于数据可能发生变化的列表，例如，排序、删除、新增

  2. 如果没有 wx:key，当列表数据发生变化时，会重新渲染整个列表，而不是只更新变化的部分

（3）演示
  1. 如果列表项是对象，可以使用对象的某个唯一属性（例如，id）作为 wx:key 的值
<view wx:for="{{users}}" wx:key="id">
  {{item.name}}
</view>

Page({
  data: {
    users: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ]
  }
});
  1. 如果列表项是简单数据类型（例如，字符串、数字），可以直接使用 *this（数组项本身）作为 wx:key 的值
<view wx:for="{{fruits}}" wx:key="*this">
  {{item}}
</view>

Page({
  data: {
    fruits: ['Apple', 'Banana', 'Orange']
  }
});
  1. 如果列表项没有唯一标识符，可以使用 index 作为 wx:key 的值
<view wx:for="{{fruits}}" wx:key="index">
  {{index + 1}}. {{item}}
</view>

Page({
  data: {
    fruits: ['Apple', 'Banana', 'Orange']
  }
});

相关文章