当前位置：首页 > article >正文

小程序 wxml 语法 —— 40 列表渲染-基本用法

article 2025/3/10 7:53:54

列表渲染：通过循环遍历一个数组或者对象，将其中的每个元素渲染到页面上；

在微信小程序中，如果需要使用列表渲染，需要在组件中使用 wx:for 属性绑定一个数组或者对象，既可使用每一项数据重复渲染当前组件；在渲染过程中，每一项的变量名默认为 item，下标变量名默认为 index；

在使用 wx:for 进行遍历时，建议加上 wx:key 属性，wx:key 的值以两种形式提供：

字符串：代表需要遍历的 array 中 item 的某个属性，该属性的值需要是列表中唯一的字符串或者数字，且不能动态改变；
保留关键字 *this 代表在 for 循环中的 item 本身，当 item 本身是一个唯一的字符串或者数字时可以使用；

注意事项：

如果不加 wx:key，会报一个 warning，如果明确知道该列表是静态，即以后数据不会变化，或者不必关注其顺序，可以选择忽略；
在给 wx:key 添加属性值时，不需要使用双大括号语法，直接使用遍历的 array 中 item 的某个属性；

下面通过微信开发者工具演示一下列表渲染应该怎么使用：

在 pages/cate/cate.js 中定义数据，如下：

Page({
  data: {
    numList: [1,2,3],
    fruitList: [
      {id: 1, name: '🍎'},
      {id: 2, name: '🍋'},
      {id: 3, name: '🍅'}
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }
})

在 pages/cate/cate.wxml 中进行列表渲染，如下：

<!-- 如果需要进行列表渲染，需要使用 wx:for 属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是 item -->
<!-- 每一项下标（索引）的变量名默认是 index -->

<!-- 如果渲染的是数组，item 是数组中每一项，index 是下标 -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view>

<!-- 如果渲染的是对象，item 是对象属性中的值，index 是对象属性 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view>

刷新页面，可以看到：

在这里插入图片描述
目前在使用 wx:for 进行列表渲染的时候，并没有使用 wx:key 这个属性，可以发现在右下角控制台中会有 warning 信息，如下：

在这里插入图片描述
因此，在使用 wx:for 的时候，可以使用 wx:key 提高性能，在 pages/cate/cate.wxml 中修改代码，如下所示：

<!-- wx:key 提升性能 -->
<!-- wx:key 属性值有两种添加形式 -->
<!-- 1. 字符串，需要是遍历数组中 item 的某个属性，要求该属性是列表中唯一的字符串或者数组，不能进行动态改变 -->
<!-- 2. 保留关键字 *this，*this 代表的是 item 本身，item 本身是唯一的字符串或者数字 -->

<!-- wx:key 的属性值不需要使用双大括号进行包裹，直接写编列的数组中 item 的某个属性 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>

<view wx:for="{{ numList }}" wx:key="this">{{ item }}</view>