WeChat Mini Program Tutorial List Rendering

wx:for

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

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

<view wx:for="{{items}}">  
 {{index}}: {{item.message}}  
</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}}: {{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, 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>

The above is the content of the list rendering of the WeChat applet tutorial. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!