WeChat Open Platform

Mini Programs Documentation

List rendering

wx:for

wx:for is used on a component to control the binding of an array by an attribute, that is, the various data in the array can be used to repeatedly render the component.

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

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Using wx:for-item specifies the variable name for the current element in the array;

Using wx:for-index specifies the variable name for the current subscript in the array:

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

Wx:for can also perform nesting, a multiplication table is shown below:

<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

Similarly to block wx:if, wx:for can also be used on a <block/> tag to render a 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 an item on the list will dynamically change or a new item is added to the list, and you want items on the list to maintain their features and status (for example, the input content in <input/> or the selected status in <switch/>), you need to use wx:key to specify the unique identifiers for the items on the list.

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

  1. A string representing a property of an item in a for loop array, the value of this property needs to be a unique string or number on the list and cannot change dynamically.
  2. The reserved keyword *this, representing the item in the for loop array itself. This indicates that the item itself needs to be a unique string or number. For example:

When a data change triggers the re-rendering of the rendering layer, this will calibrate components with a key. The framework will ensure that they are reordered and not recreated, to ensure that the components maintain their status and to improve the efficiency of list rendering.

A warning will be reported if wx:key is not provided. If it is understood clearly that the list is static, or that its order does not need to be paid attention to, Ignore can be selected.

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
    })
  }
})