小程序 WXML 模板语法 - 列表渲染

小程序 WXML 模板语法 - 列表渲染

当我们需要渲染一组数据到页面上时，列表渲染就会非常有用。在小程序中，可以使用 wx:for 对数组进行循环，然后将数组中的每个元素渲染成一个组件。

循环数组

下面是 wx:for 的基本语法：

<view wx:for="{{array}}">
  索引是：{{index}} 当前项是：{{item}}
</view>

上面的代码中，array 是需要循环的数组，index 表示当前循环项的索引，item 表示当前循环项本身。

手动指定索引和变量名

默认情况下，wx:for 会自动为当前循环项的索引和循环项本身指定变量名 index 和 item。如果你希望手动指定变量名，可以使用 wx:for-index 和 wx:for-item 属性。

下面是手动指定变量名的示例代码：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
  索引是：{{idx}} 当前项是：{{itemName}}
</view>

使用 wx:key

如果你使用 wx:for 循环渲染组件，那么建议为循环生成的每个组件添加唯一的标识符，以便组件能够被高效地更新。在小程序中，可以使用 wx:key 属性指定每个组件的唯一标识符。

下面是一个示例，演示如何使用 wx:key：

// <!-- Data 数据 -->
Page({
  data: {
    array: ['苹果', '香蕉', '葡萄'],
    userList: [
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' },
      { id: 3, name: '小白' }
    ]
  }
})

<!-- WXML 结构 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

在上面的代码中，userList 数组包含三个对象，每个对象包含一个 id 和 name 属性。在 wx:for 中，我们使用 key="id" 指定了每个组件的唯一标识符为它的 id 属性。这将有助于小程序更高效地更新组件。

注意，wx:key 的值必须是字符串，并且在相同的列表中必须是唯一的。通常，我们使用一个对象属性作为唯一标识符，这样会更加方便和可读。在上面的示例中，我们使用了 id 属性作为唯一标识符，这是一种常见的做法。

以上就是小程序中列表渲染的语法和注意事项，希望能够帮助大家理解和使用这个功能。

运行结果