List rendering
wx:for
Use the wx:for control property to bind an array on the component, and you can repeatedly render the component with the data from each item in the array.
The default array's subscript variable name of the current item is index, and the default array's current item is item.
<view wx:for="{{array}}">
{{index}}: {{}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
Use wx:for-item to specify the variable name of the current element of the array.
Use wx:for-index to specify the variable name of the current subscript of the array:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{}}
</view>
wx:for can also be nested, below is a nine-nine 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 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 item in the list changes dynamically or new items are added to the list, and the items in the list want to maintain their own characteristics and state (such as the input content in , selected state), 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 represents a property of item in the array of for loop. The value of the property needs to be the only string or number in the list and cannot be changed dynamically. The key word *this represents the item itself in the for loop. This representation requires that the item itself is a unique string or number. For example, when the data change triggers the rendering layer to re-render, the components with key will be corrected. The framework will ensure that they are re-ordered instead of re-creating, to ensure that the components remain in 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 you do not have to pay attention to its order, you can choose to ignore it.
Sample code:
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{}} </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 =
for (let i = 0; i < length; ++i) {
const x = (() * length)
const y = (() * length)
const temp = [x]
[x] = [y]
[y] = temp
}
({
objectArray:
})
},
addToFront: function(e) {
const length =
= [{id: length, unique: 'unique_' + length}].concat()
({
objectArray:
})
},
addNumberToFront: function(e){
= [ + 1 ].concat()
({
numberArray:
})
}
})
Notice:
When the value of wx:for is a string, the string is parsed into a string array
<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 the braces and quotes, 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>
Summarize
The above is the WeChat mini program wx:for loop introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. The editor will reply to you in time!