Introductory tutorial list rendering with multi-layer nested loops. In the current official documents, it is mainly a case of one-dimensional array list rendering. It is still relatively simple and single, and it still feels like there is no way to start for children who are just getting started.

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

There is also a nine-nine multiplication table that writes data directly into wxml, which is not a list rendering of a dynamic two-dimensional array.

<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>

So today, we mainly talk about dynamic multi-dimensional array and object mixed list rendering.

Explain

What is the mixing of multi-dimensional arrays and objects, give a very simple example

twoList:[{
 id:1,
 name:'應(yīng)季鮮果',
 count:1,
 twodata:[{
'id':11,
'name':'雞脆骨'
 },{
'id':12,
'name':'雞爪'
 }]
 },{
 id:2,
 name:'精致糕點(diǎn)',
 count:6,
 twodata:[{
'id':13,
'name':'羔羊排骨一條'
 },{
'id':14,
'name':'微辣'
 }]
 }]

The above example is an array, this They are all JSON formats that we often encounter in our daily development process.

The elements of this array are objects, and the objects are divided into attributes, which belong to a mixture of array objects. Maybe for children who are new to small programs, It will be difficult if you encounter such a mixture of array objects.

One layer of loop

oneList:[{
 id:1,
 name:'應(yīng)季鮮果',
 count:1
 },{
 id:2,
 name:'精致糕點(diǎn)',
 count:6
 },{
 id:3,
 name:'全球美食烘培原料',
 count:12
 },{
 id:4,
 name:'無辣不歡生猛海鮮',
 count:5
 }]

The above array objects mixed with JSON are tested with only one layer of loop. Let’s see how to loop in wxml. Let’s first look at the loop that needs to be rendered to the page. Renderings.

<view wx:for="{{oneList}}"wx:key="id">
 {{index+1}}、{{item.name}}
</view>

We can see that two curly braces are used directly to loop the view list. Please emphasize that you need to use two curly braces to list the data. If it is not wrapped, the view will also loop out, but it is not the data that you want to loop, and it will give you an illusion that there is a loop. The development tools here are a bit deceptive. You need to be more careful about this. Remember here, as long as there is data, curly braces are required.

In addition, the default subscript of the current item of the array Variable namedefaults to index, and the variable name of the current item of the array defaults to item. At the same time, I also demonstrated here how to use the array variable name and the subscript. mark.

Two-layer loop

JSON code

twoList:[{
 id:1,
 name:'應(yīng)季鮮果',
 count:1,
 twodata:[{
'id':11,
'name':'雞脆骨'
 },{
'id':12,
'name':'雞爪'
 }]
},{
 id:2,
 name:'精致糕點(diǎn)',
 count:6,
 twodata:[{
'id':13,
'name':'羔羊排骨一條'
 },{
'id':14,
'name':'微辣'
 }]
},{
 id:3,
 name:'全球美食烘培原料',
 count:12,
 twodata:[{
'id':15,
'name':'秋刀魚'
 },{
'id':16,
'name':'錫箔紙金針菇'
 }]
}]

wxml code

<view class="pad10"wx:for="{{twoList}}"wx:key="id">
 <view>
 {{index+1}}、{{item.name}}
 </view>
 <view wx:for="{{item.twodata}}"wx:for-item="twodata"wx:key="id">
 ----{{twodata.name}}---{{item.name}}
 </view>
</view>

The above screenshots and codes are two-layer embedded set of contents.

In the wxml code, we can clearly see that there are two control attributes of wx:for. In the JSON code of the second-level loop, we see that there is also first-level data twodata in each single array, here It needs to be recycled and rendered to the page. In the first layer of data, just recycle item.twodata directly. Please remember to include curly brackets.

In the second level loop, it is recommended to change the variable name of the current item to something else, that is, wx:for-item="twodata" seen in the wxml code, because the default variable name of the current item It's named item. If you don't change anything else, you won't be able to get the data of the first layer of loops because it is overwritten by the variable name of the second layer.

So in our wxml code, when looping at the second level, we can see that we can also loop through the value of the first level, that is, -------.

Multi-layer loops with more than three layers

Multi-layer array loops with more than three layers are the same in principle as second-layer loops. If you can understand the second-layer array loop, for It can be used successfully on three layers and above.

What needs to be noted is that it is a commonplace problem. The data needs to be enclosed in curly braces. From the second level onwards, change the default variable name of the current item to something else, such as wx:for-item ="twodata" , and be more careful.

wx:key unique identifier

Why does wx:key appear? The official explanation is that if the position of the items in the list changes dynamically or new items are added to In the list, and if you want the items in the list to maintain their own characteristics and status (such as the input content in the input, the selected state of the switch), you need to use wx:key to specify the unique identifier of the items in the list.

When data changes trigger the rendering layer to re-render, components with keys will be corrected. The framework will ensure that they are reordered rather than re-created to ensure that the components maintain their own state and improve the list. Rendering efficiency.

In the development process, the role of wx:key is very important for the project. If you cannot understand it from the text, you can go to github clone demo into the WeChat development tool and experience it yourself.

We see this GIFanimation picture. There is a switch in the open state. The switch state is in the title of lamb ribs. When adding data to this array, the state of this switch does not follow the lamb ribs and does not maintain its own state.

Then let’s look at another example, using wx:key unique identifier.

這個GIF動畫圖，也是點(diǎn)擊開啟了 switch 的狀態(tài)，唯一有不同的地方，就是在新增數(shù)據(jù)時，是保持著自己的狀態(tài)的。

相信通過這兩個小例子，對wx:key唯一標(biāo)識符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫個 wx:for 和 wx:key 體會下。

還有一個需要注意的地方，我們先看看以下代碼

<view class="pad10"wx:for="{{twoList}}"wx:key="id">
</view>

wx:key="id" ，我們看到 wx:key 里的值并不需要花括號的，是的，這里是比較特別的地方，不需要花括號，同時也不需要參數(shù)名，需要是雖然數(shù)據(jù)里的一個字段名。

結(jié)束語

今天我們講了列表渲染，官方給的文檔還是比較簡單單一，我們這里更深入的講了數(shù)組的一層、二層以及多層循環(huán)，還有wx:key唯一標(biāo)識符的使用方法和注意事項(xiàng)。

相信在小程序推出公測之后，很多小伙伴都已經(jīng)抓緊申請注冊小程序了。在開發(fā)階段中也碰到了很多的問題，例如wx.request數(shù)據(jù)請求不成功，在數(shù)組操作時，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽用戶輸入的狀態(tài)，css的background-image無法獲取本地資源等等，本博客會出一個專題，給碰到這些問題的小伙伴解決思路。

demo github地址：

github.com/bluefox1688/wxapp_study

【相關(guān)推薦】

1. 微信公眾號平臺源碼下載

2.?微信小程序條件渲染詳細(xì)介紹

3.?小程序開發(fā)條件渲染詳解

The above is the detailed content of WeChat development list rendering multi-layer nested loop. For more information, please follow other related articles on the PHP Chinese website!