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

前言

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

 
  
  {{index}}: {{item.message}} 

 複製代碼

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

  
 
   
   
     {{i}} * {{j}} = {{i * j}} 
    
   

 複製代碼

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

''

講解

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

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裏怎麼循環，咱們先看一下要循環渲染到頁面上的效果圖。

''

 
  
  {{index+1}}、{{item.name}} 

 複製代碼

咱們能夠看到，這裏直接用兩個花括號來給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代碼

  
 
  
    {{index+1}}、{{item.name}} 
   
 
  
    ----{{twodata.name}}---{{item.name}} 
   

 複製代碼

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

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

  

 複製代碼

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

結束語

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

相信在小程序推出公測以後，不少小夥伴都已經抓緊申請註冊小程序了。在開發階段中也碰到了不少的問題，例如wx.request數據請求不成功，在數組操做時，不知道如何往數組裏push數據，input如何監聽用戶輸入的狀態，css的background-image沒法獲取本地資源等等，本博客會出一個專題，給碰到這些問題的小夥伴解決思路。

demo github地址：
github.com/bluefox1688…

交流平臺

''

最近你們對微信小程序開發熱情大漲，結識了很多對微信小程序技術開發的牛人，也有一些剛入行的新手，特此我創建了一個微信小程序技術交流圈子，但願給大夥有一個純潔的技術交流圈子，技術交流，提高自我。咱們也會不按期發佈一些微信小程序的學習教程。
此羣的目標爲純（幹）純（貨）的技術交流羣，不死於廣告之中，已開啓了羣主邀請確認機制。
須要入羣的小夥伴，請加個人我的微信amwhuang。（備註：小程序入羣）

文章首發地址：
列表渲染多層嵌套循環及wx:key的使用--微信小程序入門教程
lanchenglv.com/article/201…如需轉載，請標明轉載出處，謝謝。