小程序中實現(xiàn)列表渲染多層嵌套循環(huán)的方法

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

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

前言

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

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

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

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

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

講解

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

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

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

一層循環(huán)

    oneList:[{                id:1,                name:'應(yīng)季鮮果',                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)渲染到頁面上的效果圖。

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

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

二層循環(huán)

JSON代碼

    twoList:[{
                id:1,
                name:'應(yīng)季鮮果',                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>

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

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

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

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

網(wǎng)頁題目：小程序中實現(xiàn)列表渲染多層嵌套循環(huán)的方法
文章地址：http://muchs.cn/article2/gcidic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、微信小程序、網(wǎng)頁設(shè)計公司、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)