从零开始学微信小程序之WXML（2.2）列表渲染

上一节是用WXML和js中的数组如何连接到数据并进行显示。
本节介绍简单的列表渲染，即循环的使用。

循环

语法格式：wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即循环这个数组，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
index：数组下标，形如[0],[1],[2],[3]…
item：数组下标对应的值，形如文本，数据，字符串等等。

WXML中：

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

js中:

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：
另外，wx:for也可以嵌套，例如下面这个九九乘法表：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for

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

wx:key（目前我没有经常使用，所以不太理解）

注意：当 wx:for 的值为字符串时，会将字符串解析成字符串数组

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

等同于

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

这样可以省去写数组的过程