WeChat applet list rendering wx:for

wx:for

Use the wx:for control property on the component to bind an array, and the component can be repeatedly rendered using the data of each item in the array.

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

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

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

Usewx:for-itemYou can specify the variable name of the current element of the array

Use wx:for-indexYou can specify the variable name of the current subscript 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. Below 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, you can also use wx:for 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 list The unique identifier of the project. The value of

wx:key is provided in two forms

1. string, representing a property of the item in the array of the for loop, and the property's The value needs to be a unique string or number in the list and cannot be changed dynamically.
2. Reserved keywords *this represents the item itself in the for loop. This representation requires the item itself to be a unique string or number, such as:

When data changes trigger the rendering layer to re-render, components with keys will be corrected. The framework will ensure that they are reordered rather than re-created to ensure that the components maintain their own state and improve the efficiency of list rendering. .

If wx:key is not provided, a warning will be reported. If you know clearly that the list is static or do not 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
    })
  }
})