零基础微信小程序开发——WXML 模板语法之列表渲染（保姆级教程+超详细）

WXML 模板语法

列表渲染

wx:for

在小程序开发中，WXML模板语法提供了列表渲染的功能，允许开发者通过指定的数组来动态生成一组元素。wx:for指令是实现这一功能的关键。

语法

wx:for指令的基本语法如下：

<view wx:for="{{array}}" wx:for-index="indexName" wx:for-item="itemName">
  <!-- 循环体内容 -->
</view>

• array：这是要遍历的数组。
• indexName（可选）：这是通过wx:for-index指定的索引变量名，用于在循环体中引用当前项的索引。如果不指定，则默认使用index。
• itemName（可选）：这是通过wx:for-item指定的当前项变量名，用于在循环体中引用当前项的值。如果不指定，则默认使用item。

语法

index.wxml文件

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

array是一个数组，wx:for指令会遍历这个数组，并为数组中的每一项生成一个<view>元素。在生成的每个<view>元素中，{{index}}会被替换为当前项的索引（从0开始），{{item}}会被替换为当前项的值。

index.js文件

Page({
    data: {
      array:['张三','男',24,'上海',178.8]
    },
  })

结果：

注意事项

• 索引和项的变量名：虽然默认情况下索引变量名为index，当前项变量名为item，但开发者可以通过wx:for-index和wx:for-item指令来自定义这些变量名。
• 数组类型：wx:for指令可以遍历普通数组、对象数组等。对于对象数组，开发者可以通过访问对象的属性来获取具体的数据。
• 性能优化：当数组较大或需要频繁更新时，使用wx:for可能会导致性能问题。此时，可以考虑使用其他优化手段，如分页加载、虚拟列表等。

应用场景

wx:for指令在小程序开发中有着广泛的应用场景，如：

• 渲染商品列表、新闻列表等动态数据。
• 生成重复的UI组件，如按钮、输入框等。
• 实现动态表单的生成和验证。

手动指定索引和当前项的变量名

在小程序开发中，WXML（WeiXin Markup Language）是类似于HTML的标记语言，用于描述小程序的结构。在列表渲染中，wx:for是一个常用的指令，它允许你遍历一个数组并生成相应的元素。默认情况下，wx:for会使用index和item作为当前项的索引和值的变量名，但你也可以手动指定这些变量名。

• wx:for：用于指定需要遍历的数组。
• wx:for-index：用于指定当前循环项的索引的变量名。这个变量名会在每次循环时被赋予一个新的值，代表当前项的索引。
• wx:for-item：用于指定当前项的变量名。这个变量名会在每次循环时被赋予数组中的当前项的值。

用法

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

• array：这是要遍历的数组。
• idx：这是通过wx:for-index指定的索引变量名，在每次循环中代表当前项的索引。
• itemName：这是通过wx:for-item指定的当前项变量名，在每次循环中代表当前项的值。

渲染结果 假设数组array的内容为['第一项', '第二项', '第三项']，那么上述代码将渲染出以下结果：

索引是：0 当前项是：第一项
索引是：1 当前项是：第二项
索引是：2 当前项是：第三项

案例

这个案例将展示如何手动指定索引和当前项的变量名，并遍历一个简单的数组来生成一个列表。列表中的每个项将显示它的索引和值。

index.wxml文件

<!-- 假设你有一个名为items的数组，它包含了一些字符串 -->
<view class="container">
  <!-- 使用wx:for指令遍历items数组 -->
  <!-- 手动指定索引变量名为idx，当前项变量名为itemValue -->
  <block wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemValue">
    <!-- 创建一个view元素来显示每个项 -->
    <view class="list-item">
      <!-- 显示索引 -->
      <text>索引: {{idx}}</text>
      <!-- 显示当前项的值 -->
      <text>值: {{itemValue}}</text>
    </view>
  </block>
</view>

• <view class="container">：这是一个容器视图，用于包含整个列表。
• <block wx:for="{{items}}" wx:for-index="idx" wx:for-item="itemValue">：
  • wx:for=“{{items}}”：指定要遍历的数组为items。
  • wx:for-index=“idx”：手动指定索引变量名为idx。
  • wx:for-item=“itemValue”：手动指定当前项变量名为itemValue。
  • <block>标签是一个不会渲染成任何DOM元素的容器，它只用于包裹其他元素并应用样式或逻辑。在这里，我们使用<block>来包裹wx:for循环，因为它不会引入额外的布局开销。
• <view class="list-item">：这是一个列表项视图，用于显示每个项的索引和值。
• <text>索引: {{idx}}</text>：显示当前项的索引。
• <text>值: {{itemValue}}</text>：显示当前项的值。

index.js文件

Page({
  data: {
    items: ['苹果', '香蕉', '橙子'] // 示例数组
  }
});

结果：

wx:key的使用

在小程序开发中，当使用wx:for指令进行列表渲染时，为了提高渲染效率和性能，建议为渲染出来的列表项指定唯一的key值。这个key值类似于Vue.js中的:key属性，它可以帮助框架更高效地识别和更新列表中的元素。

为什么要使用wx:key？

• 提高渲染效率：当列表数据发生变化时，框架可以根据key值快速定位到需要更新的元素，而不是重新渲染整个列表。
• 减少不必要的操作：通过key值，框架可以避免对未改变元素的重复操作，从而提高性能。

如何使用wx:key？

1.第一步

定义数据：首先，在data对象中定义一个数组(也就是在index.js文件中)，数组中的每个元素都应该有一个唯一的标识符（如id）。

data: {
  userList: [
    { id: 1, name: '小红' },
    { id: 2, name: '小黄' },
    { id: 3, name: '小白' }
  ]
}

2.第二步

在wxml模板中使用wx:for和wx:key，也就是在index.wxml文件中：

• 使用wx:for指令遍历数组。
• 使用wx:key属性指定数组中每个元素的唯一标识符的字段名。

<view wx:for="{{userList}}" wx:key="id">
  {{item.name}}
</view>

wx:for指令遍历userList数组，wx:key属性指定了数组中每个元素的唯一标识符为id字段。这样，当userList数组中的数据发生变化时，框架可以根据id字段快速定位到需要更新的元素。

实战案例

本案例将展示如何在小程序中使用wx:key属性来优化列表渲染。我们将定义一个包含用户信息的数组userList，并在WXML模板中使用wx:for指令遍历这个数组。同时，我们将为列表项指定唯一的key值，以提高渲染效率。

index.js文件

// data 数据
Page({
  data: {
    userList: [
      { id: 1, name: '小红' },
      { id: 2, name: '小黄' }, // 注意：原图片中的逗号使用了中文逗号，这里已更正为英文逗号
      { id: 3, name: '小白' }
    ]
  }
});

index.wxml文件

<!-- wxml 结构 -->
<view wx:for="{{userList}}" wx:key="id">
  <!-- 使用item变量来访问当前遍历项的数据 -->
  <!-- 这里{{item.name}}表示访问当前项的name属性 -->
  <text>{{item.name}}</text>
</view>

• wx:for=“{{userList}}”：这个指令表示要遍历userList数组，并为数组中的每个元素生成一个视图容器。
• wx:key=“id”：这个属性指定了数组中每个元素的唯一标识符为id字段。这样，当userList数组中的数据发生变化时（如添加、删除或更新元素），框架可以根据id字段快速定位到需要更新的元素，而不是重新渲染整个列表。
• {{item.name}}：在遍历过程中，item变量代表当前遍历到的数组元素。因此，{{item.name}}用于访问当前元素的name属性，并将其显示在视图上。

结果：

注意事项

• wx:key的值应该是绑定数据中某个属性的名称，该属性在数组中每个元素中应该是唯一的。
• 如果不指定wx:key，在某些情况下可能会导致渲染性能下降，因为框架可能需要重新渲染整个列表。
• 在选择作为wx:key的属性时，应该选择那些在整个列表中不会重复的属性，如id、唯一标识符等。