《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（3）

《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（2）: https://developer.aliyun.com/article/1228016?groupCode=tech_library  

3．列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组 件。数组中当前项的下标变量名默认是 index，数组中当前项的变量名默认为 item。代码清 单 2-36 即为 wxml 文件中的代码。

代码清单 2-36

<viewwx:for="{{array}}">{{index}} -- {{item.name}} -- {{item.age}}
</view>

代码清单 2-37 即为 js 文件中的代码。

代码清单 2-37

Page({
data: {
array: [
      {
name: "石璞东",
age: 22      },
      {
name: "hahaAI",
age: 1      },
      {
name: "hahaWebsite.",
age: 4      }
    ]
  }
})

代码清单 2-37 定义了一个数组，其数组项全是对象。我们 通过 view 组件将数组项中的内容重复渲染、输出到页面上， 运行结果如图 2-40 所示。

我们也可以使用 wx:for-item 或 wx:for-index 分别修改数 组当前元素的变量名或当前下标的变量名，如代码清单 2-38 所示。

代码清单 2-38

<viewwx:for="{{array}}"wx:for-item="user"wx:for-index="userIndex">{{userIndex}} -- {{user.name}} -- {{user.age}}
</view>

接下来，再看 block wx:for。与 block wx:if 一样，我们也可以在标签上用 block wx:for 来渲染一个包含多个节点的结构块，如代码清单 2-39 所示。

代码清单 2-39

<blockwx:for="{{array}}"><view>{{index}} -- {{item.name}} -- {{item.age}}</view></block>

最后，我们看控制台的一条警告消息，如图 2-41 所示。

根据警告消息，当我们需要使用数组中的各项来重复渲染该组件时，需要给该组件添加 wx:key 属性来提高性能，如代码清单 2-40 所示。

代码清单 2-40

<blockwx:for="{{array}}"wx:key="index"><view>{{index}} -- {{item.name}} -- {{item.age}}</view></block>

当成功添加 wx:key 属性后，警告消失，运行结果如图 2-42 所示。

《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（4）: https://developer.aliyun.com/article/1228014?groupCode=tech_library