List rendering of WeChat applet example introduction

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces the relevant content about list rendering. Let’s take a look at it together. I hope it will be helpful to everyone.

【Related learning recommendations: 小program learning tutorial】

wx:for

Through wx:for You can loop to render repeated component structures based on the specified array. The syntax example is as follows:

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

By default, the index of the current loop item is represented by index; the current loop item is represented by item hacker.wxml Define a for loop to access the array

<view> 
    索引是：{{index}} 当前项是：{{item}}
</view>

hacker.js Define an array

Page({    data:{        arr1:['a','b','c']
    }
})

The running results are as follows:

Manually specify the index and variable name of the current item

Use wx:for-index A variable name that specifies the index of the current loop item Use wx:for-item to specify the variable name of the current item The sample code is as follows:

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.wxml

<view>
    索引是：{{idx}}  当前项是：{{itemName}}
</view>

hacker.js

Page({    data:{        arr1:['a','b','c']
    }
})

The running results are as follows:

wx:key usage

Similar to :key in Vue list rendering, when the applet implements list rendering, it is also recommended to specify a unique key value for the rendered list items to improve rendering efficiency. The sample code is as follows: hacker.wxml

<view>{{item.name}}</view>

hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})

The running results are as follows: [Related learning recommendations: 小program learning tutorial]

The above is the detailed content of List rendering of WeChat applet example introduction. For more information, please follow other related articles on the PHP Chinese website!