List Rendering

wx:for

Using the wx:for control attribute on a component to bind an array, you can use the data of each item in the array to repeatedly render the component.

The default subscript variable name of the current item in the array is index, and the default variable name of the current item in the array is item.

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

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

Use wx:for-item to specify the variable name of the current element in the array.

Use wx:for-index to specify the variable name of the current index of the array:

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

wx:for can also be nested, and the following is a multiplication table.

<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

Similar to block wx:if, wx:for can also be used on the <block/> tag to render a structure block containing multiple nodes. For example:

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

wx:key

If the position of the items in the list will change dynamically or new items are added to the list, and you want the items in the list to maintain their own characteristics and status (such as the input content in <input/>, the selected state of <switch/>), you need to use wx:key to specify the unique identifier of the item in the list.

The value of wx:key is provided in two forms:

• A string representing a property of the item in the array of the for loop. The value of the property needs to be a unique string or number in the list and cannot be changed dynamically.

• The reserved keyword *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number.

When data changes trigger the rendering layer to re-render, the components with key will be corrected, and the framework will ensure that they are reordered instead of recreated to ensure that the components maintain their own state and improve the efficiency of list rendering, as shown in the following code:

If wx:key is not provided, a warning will be reported. If you know that the list is static or you don't need to pay attention to its order, you can choose to ignore it.

Sample code:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>

Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){
    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

Notes

When the value of wx:for is a string, the string will be parsed into a string array.

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

This is equivalent to

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

TIP

If there is a space between the curly braces and the quotation marks, it will eventually be parsed into a string.

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

This is equivalent to

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