列表渲染多層嵌套循環及wx:key的使用--微信小程序入門教程

轉載:http://blog.lanchenglv.com/article/wxapp_list_foreach.html

@藍狐 2016-11-24 00:00:00

前言

入門教程之列表渲染多層嵌套循環，目前官方的文檔里，主要是一維數組列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。

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

還有一個九九乘法表把數據直接寫到wxml里的，並不是動態二維數組的列表渲染。

1. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
3. <view wx:if="{{i <= j}}">
4. {{i}} * {{j}} = {{i * j}}
5. </view>
6. </view>
7. </view>

那么今天，我們主要來講講動態多維數組和對象混合的列表渲染。

講解

何為多維數組和對象混合，給個很簡單的例子

1. twoList:[{
2. id:1,
3. name:'應季鮮果',
4. count:1,
5. twodata:[{
6. 'id':11,
7. 'name':'雞脆骨'
8. },{
9. 'id':12,
10. 'name':'雞爪'
11. }]
12. },{
13. id:2,
14. name:'精致糕點',
15. count:6,
16. twodata:[{
17. 'id':13,
18. 'name':'羔羊排骨一條'
19. },{
20. 'id':14,
21. 'name':'微辣'
22. }]
23. }]

上述例子就是一個數組，這都是我們日常開發過程中，經常會碰到的JSON格式， 該數組的元素是有對象，對象又分為屬性，屬於數組對象混合，可能對於剛接觸小程序的童鞋，碰到這種數組對象混合的就會發難了。

一層循環

1. oneList:[{
2. id:1,
3. name:'應季鮮果',
4. count:1
5. },{
6. id:2,
7. name:'精致糕點',
8. count:6
9. },{
10. id:3,
11. name:'全球美食烘培原料',
12. count:12
13. },{
14. id:4,
15. name:'無辣不歡生猛海鮮',
16. count:5
17. }]

以上數組對象混合JSON，是測試只有一層循環的，我們看看在wxml里怎么循環，我們先看一下要循環渲染到頁面上的效果圖。

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

我們可以看到，這里直接用兩個花括號來給view 循環列表，注意強調一下，請記得一下要用 兩個花括號數據起來，如果不包起來，view也會循環出來，但並不是自己要循環的數據，而且是給了一個假象給你以為是有循環了，這里開發工具有點坑人的感覺，這個還需要多細心點，這里記住一點，只要是有數據的，就需要花括號。 另外默認數組的當前項的下標變量名默認為index，數組當前項的變量名默認為item，同時我這里也順道演示了如何使用數組變量名和下標。

二層循環

JSON代碼

1. twoList:[{
2. id:1,
3. name:'應季鮮果',
4. count:1,
5. twodata:[{
6. 'id':11,
7. 'name':'雞脆骨'
8. },{
9. 'id':12,
10. 'name':'雞爪'
11. }]
12. },{
13. id:2,
14. name:'精致糕點',
15. count:6,
16. twodata:[{
17. 'id':13,
18. 'name':'羔羊排骨一條'
19. },{
20. 'id':14,
21. 'name':'微辣'
22. }]
23. },{
24. id:3,
25. name:'全球美食烘培原料',
26. count:12,
27. twodata:[{
28. 'id':15,
29. 'name':'秋刀魚'
30. },{
31. 'id':16,
32. 'name':'錫箔紙金針菇'
33. }]
34. }]

wxml代碼

1. <view class="pad10" wx:for="{{twoList}}" wx:key="id">
2. <view>
3. {{index+1}}、{{item.name}}
4. </view>
5. <view wx:for="{{item.twodata}}" wx:for-item="twodata" wx:key="id">
6. ----{{twodata.name}}---{{item.name}}
7. </view>
8. </view>

以上截圖和代碼是二層嵌套內容。 我們在wxml代碼里，很明顯的看到有兩個wx:for的控制屬性，在二層循環的JSON代碼里，我們看每個單數組里還有一級數據twodata，這里是需要再循環渲染到頁面上的，在第一層數據里，直接再循環item.twodata即可，請記得一定要帶上花括號。 在第二層的循環里，建議把當前項的變量名改為其他，即在wxml代碼里看到的wx:for-item="twodata"，因為默認的當前項的變量名為item，如果不改換其他的話，你是拿不到第一層循環的數據的，因為被第二層的變量名覆蓋了。 所以我們在wxml代碼里，在第二層循環時，可以看到還可以循環第一層的值，即----{{twodata.name}}---{{item.name}}。

三層以上的多層循環

三層以上的多層的數組循環，在原理上同二層循環是一樣的，能理解了二層數組循環，對於三層以及三層以上都能得心應用的。 需要注意的地方，那就是老生常談的問題了，數據需要用花括號括起來，從第二層起，把默認的當前項的變量名改為其他，例如wx:for-item="twodata"，還有細心再細心。

wx:key唯一標識符

為什么會有wx:key的出現呢，官方給的解釋是，如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。 當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。 在開發過程中，wx:key的作用對於項目作用是非常大的，如果從文字上無法理解的童鞋，可以到github clone demo到微信開發工具里，親自體驗下。

我們看到這個GIF動畫圖，這里有一個switch的開啟狀態，switch的狀態是在標題為羔羊排骨一條的，在對這個數組增加數據時，這個switch的狀態並不跟隨着羔羊排骨一條，並不保持自己的狀態。

那我們再看另一個例子，使用了wx:key唯一標識符。

這個GIF動畫圖，也是點擊開啟了switch的狀態，唯一有不同的地方，就是在新增數據時，是保持着自己的狀態的。 相信通過這兩個小例子，對wx:key唯一標識符應該也有所了解啦，想要提升技術，就要多折騰，自己在小程序里，寫個wx:for 和 wx:key 體會下。

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

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

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