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

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

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

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

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

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

 

 

講解

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

twoList:[{
                id:1,
                name:'應季鮮果',
                count:1,
                twodata:[{
                    'id':11,
                    'name':'雞脆骨'
                },{
                    'id':12,
                    'name':'雞爪'
                }]
        },{
                id:2,
                name:'精緻糕點',
                count:6,
                twodata:[{
                    'id':13,
                    'name':'羔羊排骨一條'
                },{
                    'id':14,
                    'name':'微辣'
                }]
        }]

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

 

一層循環

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

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

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

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

二層循環

 

 

JSON代碼

 

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

wxml代碼

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

以上截圖和代碼是二層嵌套內容。
咱們在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 體會下。

還有一個須要注意的地方，咱們先看看如下代碼

 

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

wx:key="id"，咱們看到wx:key裏的值並不須要花括號的，是的，這裏是比較特別的地方，不須要花括號，同時也不須要參數名，須要是雖然數據裏的一個字段名。我嘗試過用index這個屬性和官方給的*this去實現缺沒能達到這樣的效果，若是有知道爲何的童鞋，告訴我一下~

結束語

今天咱們講了列表渲染，官方給的文檔仍是比較簡單單一，咱們這裏更深刻的講了數組的一層、二層以及多層循環，還有wx:key惟一標識符的使用方法和注意事項。