# List rendering

# wx:for

Bind an array with thewx: forcontrol property on a component, and you can render the component repeatedly using the data of the items in the array.

The subscript variable name of the current item of the default array defaults toindexand the variable name of the current item of the array defaults toitem

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

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

Usingwx: for-itemyou can specify the variable name of the current element of the array,

Usingwx: 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: forcan also be nested. Below is a 99 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

Similarblock wx: if,You can also usewx: foron the tag to render a block with multiple nodes.For example:

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

# wx:key

If the location of an item in a list changes dynamically or a new item is added to the list, and you want the item in the list to maintain its own characteristics and state (e.g. input )The input content in the list, the selected state of switch , requireswx: keyto specify the unique identifier of the item in the list.

The value of wx: keyis provided in two forms

1. A character string that represents a property of an item in the array of the for loop. The property must be the only character string or number in the list and cannot be changed dynamically.
2. Leaving the keyword * thisrepresents the item itself in the for loop, which requires that the item itself be a unique character string or number.

When data changes trigger a rerendering of the rendering layer, components with keys are corrected, and the framework ensures that they are reordered rather than recreated to ensure that components remain in their own state and to improve the efficiency of list rendering.

Ifwx: key, anwarningwill be issued,If it is clear that the list is static, or if you do not have to focus on its order, you can choose to ignore it.

# sample code

Preview with Developer Tool

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

# Note

Whenwx: foris a string, the string is parsed into a string array

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

It's equivalent to

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

Note: A space between curly braces and quotes will eventually resolve to a character string

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

It's equivalent to

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