Series of articles:
WeChat applet tutorial: WXSS
WeChat applet tutorial quotes
WeChat applet tutorial events
WeChat applet tutorial template
WeChat applet tutorial list rendering
WeChat applet tutorial conditional rendering
WeChat applet tutorial data binding
WeChat applet tutorial: WXML
wx:for
Use the wx:for control property to bind an array on the component, and you can repeatedly render the component using the data of each item in the array.
The default array's current item's subscript variable name is index, and the default array's current item's variable name is item.
<view wx:for="{{items}}">
{{index}}: {{}}
</view>
Page({
items: [{
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 <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>
Thank you for reading, I hope it can help you. Thank you for your support for this site!