Einführendes Tutorial zum Rendern von Listen mit mehrschichtigen verschachtelten Schleifen. Derzeit konzentrieren sich die offiziellen Dokumente haupts?chlich auf das Rendern eindimensionaler Array-Listen. Es ist immer noch relativ einfach und fühlt sich immer noch so an Für Kinder, die gerade erst anfangen, ist das kein guter Anfang.

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

Es gibt auch eine Multiplikationstabelle, die Daten direkt in wxml schreibt, bei der es sich nicht um eine Listendarstellung eines dynamischen zweidimensionalen Arrays handelt.

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

Daher werden wir heute haupts?chlich über dynamisches mehrdimensionales Array- und Objekt-Mischlisten-Rendering sprechen.

Erkl?ren Sie

, was die Mischung mehrdimensionaler Arrays und Objekte ist, und geben Sie ein sehr einfaches Beispiel

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

Das Obige Beispiel ist ein Array, das ist das JSON-Format, das uns in unserem t?glichen Entwicklungsprozess h?ufig begegnet.

Die Elemente dieses Arrays sind Objekte, und die Objekte sind in Attribute unterteilt, die Array-Objekt-Hybride sind Für diejenigen, die mit kleinen Programmen noch nicht vertraut sind, kann es nützlich sein. Wenn Sie auf diese Art von Array-Objekten sto?en, werden Sie in Schwierigkeiten geraten.

Eine Schleifenebene

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

Die oben genannten mit JSON gemischten Array-Objekte werden mit nur einer Schleifenebene getestet. Sehen wir uns zun?chst die Schleifenwiedergabe an zur Seite. Die Renderings oben.

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

Wir k?nnen sehen, dass zwei geschweifte Klammern direkt zum Schleifen der Ansichtsliste verwendet werden. Bitte denken Sie daran, zwei geschweifte Klammern für Daten zu verwenden. Wenn Sie es nicht abschlie?en, wird die Ansicht ebenfalls in einer Schleife ausgeführt, aber es sind nicht die Daten, die Sie in einer Schleife ausführen m?chten, und es wird Ihnen die Illusion vermittelt, dass es eine Schleife gibt. Die Entwicklungstools hier t?uschen etwas, und das müssen Sie auch sein Seien Sie vorsichtiger. Denken Sie hier an eines: Solange Daten vorhanden sind, sind geschweifte Klammern erforderlich.

Au?erdem ist der Standardindex des aktuellen Elements des ArraysDer Variablennamestandardm??ig index und der Variablenname des aktuellen Elements des Arrays standardm??ig item Gleichzeitig Au?erdem habe ich hier gezeigt, wie man den Array-Variablennamen und die Indexmarkierung verwendet.

Zweischichtige Schleife

JSON-Code

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':'秋刀魚(yú)'
 },{
'id':16,
'name':'錫箔紙金針菇'
 }]
}]

WXML-Code

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

Die obigen Screenshots und Code Es ist die zweite Ebene des verschachtelten Inhalts.

Im WXML-Code k?nnen wir deutlich erkennen, dass es zwei Steuerattribute von wx:for gibt. Im JSON-Code der Schleife der zweiten Ebene sehen wir, dass es in jedem auch Daten der ersten Ebene gibt Einzelnes Array, hier Es muss recycelt und auf der Seite gerendert werden. Recyceln Sie einfach item.twodata direkt.

In der Schleife der zweiten Ebene wird empfohlen, den Variablennamen des aktuellen Elements in etwas anderes zu ?ndern, d. h. wx:for-item="twodata" im WXML-Code, da dies die Standardeinstellung ist Variablenname des aktuellen Elements. Es hei?t item. Wenn Sie sonst nichts ?ndern, k?nnen Sie die Daten der ersten Schleifenebene nicht abrufen, da sie durch den Variablennamen der zweiten Ebene überschrieben werden.

Wenn wir also in unserem WXML-Code eine Schleife auf der zweiten Ebene durchlaufen, k?nnen wir sehen, dass wir auch den Wert der ersten Ebene durchlaufen k?nnen, also -------.

Mehrschichtige Schleifen mit mehr als drei Schichten

Mehrschichtige Array-Schleifen mit mehr als drei Schichten sind im Prinzip dasselbe wie zweischichtige Schleifen, wenn Sie die zwei Schichten verstehen Array-Schleife, denn Es kann erfolgreich auf drei Ebenen und mehr verwendet werden.

Zu beachten ist, dass Daten in geschweifte Klammern eingeschlossen werden müssen. ?ndern Sie ab der zweiten Ebene den Standardvariablennamen des aktuellen Elements in etwas anderes, z. B. wx:for-. item ="twodata" und seien Sie vorsichtiger.

wx:key eindeutige Kennung

Warum erscheint wx:key? Die offizielle Erkl?rung lautet: Wenn sich die Position der Elemente in der Liste dynamisch ?ndert oder neue Elemente zur Liste hinzugefügt werden, und wenn Sie m?chten, dass die Elemente in der Liste ihre eigenen Eigenschaften und ihren eigenen Status beibehalten (z. B. den Eingabeinhalt in der Eingabe, den ausgew?hlten Status des Schalters), müssen Sie wx:key verwenden, um die eindeutige Kennung der Elemente in anzugeben die Liste.

Wenn Daten?nderungen ein erneutes Rendern der Rendering-Ebene ausl?sen, werden Komponenten mit Schlüsseln korrigiert. Das Framework stellt sicher, dass sie neu angeordnet und nicht neu erstellt werden, um sicherzustellen, dass die Komponenten ihren eigenen Zustand beibehalten und die Liste verbessern. Rendering-Effizienz.

Im Entwicklungsprozess ist die Rolle von wx:key für das Projekt sehr wichtig. Wenn Sie es aus dem Text nicht verstehen k?nnen, k?nnen Sie es in der Github-Klon-Demo im WeChat-Entwicklungstool ausprobieren selbst.

Wir sehen dieses GIFAnimationBild. Der Status des Schalters befindet sich im Titel der Lammrippen In diesem Array folgt der Zustand dieses Schalters nicht den Lammrippen und beh?lt seinen eigenen Zustand nicht bei.

Dann schauen wir uns ein weiteres Beispiel an, bei dem die eindeutige Kennung wx:key verwendet wird.

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

相信通過(guò)這兩個(gè)小例子，對(duì)wx:key唯一標(biāo)識(shí)符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫(xiě)個(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è)字段名。

結(jié)束語(yǔ)

今天我們講了列表渲染，官方給的文檔還是比較簡(jiǎn)單單一，我們這里更深入的講了數(shù)組的一層、二層以及多層循環(huán)，還有wx:key唯一標(biāo)識(shí)符的使用方法和注意事項(xiàng)。

相信在小程序推出公測(cè)之后，很多小伙伴都已經(jīng)抓緊申請(qǐng)注冊(cè)小程序了。在開(kāi)發(fā)階段中也碰到了很多的問(wèn)題，例如wx.request數(shù)據(jù)請(qǐng)求不成功，在數(shù)組操作時(shí)，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽(tīng)用戶輸入的狀態(tài)，css的background-image無(wú)法獲取本地資源等等，本博客會(huì)出一個(gè)專題，給碰到這些問(wèn)題的小伙伴解決思路。

demo github地址：

github.com/bluefox1688/wxapp_study

【相關(guān)推薦】

1. 微信公眾號(hào)平臺(tái)源碼下載

2.?微信小程序條件渲染詳細(xì)介紹

3.?小程序開(kāi)發(fā)條件渲染詳解

Das obige ist der detaillierte Inhalt vonVon WeChat entwickelte mehrschichtige verschachtelte Schleife zur Listenwiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!