最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

為藍(lán)田等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及藍(lán)田網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站建設(shè)、藍(lán)田網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

前言

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

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

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

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

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

講解

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

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

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

一層循環(huán)

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

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

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

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

二層循環(huán)

JSON代碼

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

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

以上截圖和代碼是二層嵌套內(nèi)容。
我們在wxml代碼里，很明顯的看到有兩個(gè)wx:for的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個(gè)單數(shù)組里還有一級(jí)數(shù)據(jù)twodata，這里是需要再循環(huán)渲染到頁面上的，在第一層數(shù)據(jù)里，直接再循環(huán)item.twodata即可，請記得一定要帶上花括號(hào)。
在第二層的循環(huán)里，建議把當(dāng)前項(xiàng)的變量名改為其他，即在wxml代碼里看到的wx:for-item=”twodata”，因?yàn)槟J(rèn)的當(dāng)前項(xiàng)的變量名為item，如果不改換其他的話，你是拿不到第一層循環(huán)的數(shù)據(jù)的，因?yàn)楸坏诙拥淖兞棵采w了。
所以我們在wxml代碼里，在第二層循環(huán)時(shí)，可以看到還可以循環(huán)第一層的值，即—-{{twodata.name}}—{{item.name}}。

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

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

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

網(wǎng)站標(biāo)題：小程序中實(shí)現(xiàn)列表渲染多層嵌套循環(huán)的方法-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://fisionsoft.com.cn/article/pipid.html