WeChat Widgets list renders wx:for

wx:for

By binding an array wx:for control property, you can render the component repeatedly using the data for each item in the array.

The underlying variable name of the current item of the default array defaults index and the variable name of the current item of the array defaults item

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

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

Using wx:for-item can specify the variable name of the current element of the array.

Using wx:for-index can specify the variable name of the array's current undersigned:

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

Here's a round-up of the picture list for acarlost, using the wx:for method:

This attention. wx: Key still has to be added, otherwise always report this prompt error

wx:for also be nested, with a nine-nine multiplication table at the bottom

<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 block wx:if you can also use wx:for on the <block/> to render a multi-node structure block. For example:

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

wx:key

If the location of items in the list changes dynamically or new items are added to the list, and you want <input/> in the list to maintain their own characteristics and status (such as input in , selected in <switch/> you need wx:key to specify a unique identifier for items in the list.

wx:key is available in two forms

1. A string that represents a property of item in the array of the for loop, and the value of that property needs to be the only string or number in the list and cannot be changed dynamically.
2. The *this represents the item itself in the for loop, which requires the item itself to be a unique string or number, such as:

When a data change triggers a rendering layer to re-render, components with key are corrected, and the framework ensures that they are reordered rather than recreated to ensure that the components remain in their own state and to improve the efficiency of list rendering.

If wx:key warning is warning to ignore it if you know clearly that the list is static, or if you do not have to pay attention to its order.

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

Attention:

When wx:for is a string, the string is parsed into an array of strings

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

Equivalent to

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

Note: If there is a space between parentheses and quotation marks, it will eventually be parsed into a string

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

Equivalent to

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