小編給大家分享一下小程序中實現(xiàn)列表渲染多層嵌套循環(huán)的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、雅安服務器托管、營銷軟件、網站建設、市中網站維護、網站推廣。

前言

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

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

還有一個九九乘法表把數(shù)據直接寫到wxml里的，并不是動態(tài)二維數(shù)組的列表渲染。

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

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

講解

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

 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':'微辣'
                }]
        }]

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

一層循環(huán)

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

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

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

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

二層循環(huán)

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的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個單數(shù)組里還有一級數(shù)據twodata，這里是需要再循環(huán)渲染到頁面上的，在第一層數(shù)據里，直接再循環(huán)item.twodata即可，請記得一定要帶上花括號。
在第二層的循環(huán)里，建議把當前項的變量名改為其他，即在wxml代碼里看到的wx:for-item=”twodata”，因為默認的當前項的變量名為item，如果不改換其他的話，你是拿不到第一層循環(huán)的數(shù)據的，因為被第二層的變量名覆蓋了。
所以我們在wxml代碼里，在第二層循環(huán)時，可以看到還可以循環(huán)第一層的值，即—-{{twodata.name}}—{{item.name}}。

三層以上的多層循環(huán)

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

看完了這篇文章，相信你對小程序中實現(xiàn)列表渲染多層嵌套循環(huán)的方法有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！