【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中實(shí)現(xiàn)列表渲染多層嵌套循環(huán)的方法

【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序中實(shí)現(xiàn)列表渲染多層嵌套循環(huán)的方法

在下給大家分享一下小程序中實(shí)現(xiàn)列表渲染多層嵌套循環(huán)的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！前言入門教程之列表渲染多層嵌套循環(huán)，目前官方的文檔里，主要是一維數(shù)組列表渲染的案例，還是比較簡(jiǎn)單單一，給剛?cè)腴T的童鞋還是無(wú)從入手的感覺。<view

wx:for="{{items}}">

{{index}}:

{{item.message}}</view>還有一個(gè)九九乘法表把數(shù)據(jù)直接寫到wxml里的，并不是動(dòng)態(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>那么今天，我們主要來(lái)講講動(dòng)態(tài)多維數(shù)組和對(duì)象混合的列表渲染。講解何為多維數(shù)組和對(duì)象混合，給個(gè)很簡(jiǎn)單的例子

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ù)組的元素是有對(duì)象，對(duì)象又分為屬性，屬于數(shù)組對(duì)象混合，可能對(duì)于剛接觸小程序的童鞋，碰到這種數(shù)組對(duì)象混合的就會(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:'無(wú)辣不歡生猛海鮮',

count:5

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

wx:for="{{oneList}}"

wx:key="id">

{{index+1}}、{{}}</view>我們可以看到，這里直接用兩個(gè)花括號(hào)來(lái)給view循環(huán)列表，注意強(qiáng)調(diào)一下，請(qǐng)記得一下要用兩個(gè)花括號(hào)數(shù)據(jù)起來(lái)，如果不包起來(lái)，view也會(huì)循環(huán)出來(lái)，但并不是自己要循環(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代碼

<view

class="pad10"

wx:for="{{twoList}}"

wx:key="id">

<view>

{{index+1}}、{{}}

</view>

<view

wx:for="{{item.twodata}}"

wx:for-item="twodata"

wx:key="id">

{{}}{{}}

</view>

</view>以上截圖和代碼是二層嵌套內(nèi)容。我們?cè)趙xml代碼里，很明顯的看到有兩個(gè)wx:for的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個(gè)單數(shù)組里還有一級(jí)數(shù)據(jù)twodata，這里是需要再循環(huán)渲染到頁(yè)面上的，在第一層數(shù)據(jù)里，直接再循環(huán)item.twodata即可，請(qǐng)記得一定要帶上花括號(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了。所以我們?cè)趙xml代碼里，在第二層循環(huán)時(shí)，可以看到還可以循環(huán)第一層的值，即—-{{twoda