1.wx:for实现列表渲染

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

<view wx:for="{
         
  {array}}">
  {
         
  {index}}: {
         
  {item}}
</view>

Page({
  data: {
    array: [第一项,第二项,第三项]
  }
})

另外，使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{
         
  {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
         
  {idx}}: {
         
  {itemName}}
</view>

下面做一个演示：在js中定义一个数组，使用wx:for在wxml中重复渲染view组件结构： 显示效果如下：

同时，wx:for还可以嵌套使用。

2.block结合wx:for使用

当把wx:for使用到<block/>标签上时，可以重复渲染一个包含多节点的结构块：

<block wx:for="{
         
  {[1, 2, 3]}}">
  <view> {
         
  {index}}: </view>
  <view> {
         
  {item}} </view>
</block>

这种使用方法类似于上节的wx:if结合block使用来实现条件渲染的方式。

3. wx:key实现列表渲染

小程序在进行列表渲染时，建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率。

wx:key 的值以两种形式提供

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态。

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

Page({
  data: {
    userlist:[
      {id:1,name:zhang},
      {id:2,name:wang},
      {id:3,name:li}
    ]
  }
})

4.注意事项

1. 花括号和引号之间如果有空格，将最终被解析成为字符串。
2. 当 wx:for 的值为字符串时，会将字符串解析成字符串数组。

<view wx:for="array">
  {
         
  {item}}
</view>

和以下情况相同：

<view wx:for="{
         
  {[a,r,r,a,y]}}">
  {
         
  {item}}
</view>