前言

入門教程之列表渲染多層巢狀迴圈，目前官方的文件裡，主要是一維陣列列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。

<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，同時我這裡也順道演示瞭如何使用陣列變數名和下標。

二層迴圈

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"，還有細心再細心。

文章轉自：https://www.jianshu.com/p/87cdf985b2b9

關注微信公眾號：lovephp