微信小程序 列表渲染 wx:for

wx:for

---

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

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

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

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

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

wx:for 也可以嵌套，下边是一个九九乘法表

<view wx:for="{
      {[1, 2, 3, 4, 5, 6, 7, 8, 9]}}"