這篇文章主要介紹微信開發(fā)之如何實(shí)現(xiàn)列表渲染多層嵌套循環(huán)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比太和網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式太和網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋太和地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

undefined

示例：

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

那么今天，我們主要來講講動(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:'無辣不歡生猛海鮮',
 count:5
 }]

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

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

我們可以看到，這里直接用兩個(gè)花括號(hào)來給 view 循環(huán)列表，注意強(qiáng)調(diào)一下，請(qǐng)記得一下要用 兩個(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代碼

<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)容。

我們?cè)趙xml代碼里，很明顯的看到有兩個(gè) wx:for 的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個(gè)單數(shù)組里還有一級(jí)數(shù)據(jù) twodata ，這里是需要再循環(huán)渲染到頁面上的，在第一層數(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)第一層的值，即 ------- 。

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

三層以上的多層的數(shù)組循環(huán)，在原理上同二層循環(huán)是一樣的，能理解了二層數(shù)組循環(huán)，對(duì)于三層以及三層以上都能得心應(yīng)用的。

需要注意的地方，那就是老生常談的問題了，數(shù)據(jù)需要用花括號(hào)括起來，從第二層起，把默認(rèn)的當(dāng)前項(xiàng)的變量名改為其他，例如 wx:for-item="twodata" ，還有細(xì)心再細(xì)心。

wx:key唯一標(biāo)識(shí)符

為什么會(huì)有 wx:key 的出現(xiàn)呢，官方給的解釋是，如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 input 中的輸入內(nèi)容， switch 的選中狀態(tài)），需要使用 wx:key 來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

在開發(fā)過程中， wx:key 的作用對(duì)于項(xiàng)目作用是非常大的，如果從文字上無法理解的童鞋，可以到github clone demo到微信開發(fā)工具里，親自體驗(yàn)下。

我們看到這個(gè)GIF動(dòng)畫圖，這里有一個(gè) switch 的開啟狀態(tài)， switch 的狀態(tài)是在標(biāo)題為 羔羊排骨一條 的，在對(duì)這個(gè)數(shù)組增加數(shù)據(jù)時(shí)，這個(gè) switch 的狀態(tài)并不跟隨著 羔羊排骨一條 ，并不保持自己的狀態(tài)。

那我們?cè)倏戳硪粋€(gè)例子，使用了wx:key唯一標(biāo)識(shí)符。

這個(gè)GIF動(dòng)畫圖，也是點(diǎn)擊開啟了 switch 的狀態(tài)，唯一有不同的地方，就是在新增數(shù)據(jù)時(shí)，是保持著自己的狀態(tài)的。

相信通過這兩個(gè)小例子，對(duì)wx:key唯一標(biāo)識(shí)符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫個(gè) wx:for 和 wx:key 體會(huì)下。

還有一個(gè)需要注意的地方，我們先看看以下代碼

<view class="pad10"wx:for="{{twoList}}"wx:key="id">
</view>

wx:key="id" ，我們看到 wx:key 里的值并不需要花括號(hào)的，是的，這里是比較特別的地方，不需要花括號(hào)，同時(shí)也不需要參數(shù)名，需要是雖然數(shù)據(jù)里的一個(gè)字段名。

以上是“微信開發(fā)之如何實(shí)現(xiàn)列表渲染多層嵌套循環(huán)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：微信開發(fā)之如何實(shí)現(xiàn)列表渲染多層嵌套循環(huán)
網(wǎng)頁地址：http://jinyejixie.com/article26/peoejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站改版、定制網(wǎng)站、微信公眾號(hào)、用戶體驗(yàn)、建站公司

廣告

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