Heim > WeChat-Applet > Mini-Programmentwicklung > Listendarstellung der WeChat-Applet-Beispieleinführung

Listendarstellung der WeChat-Applet-Beispieleinführung

WBOY
Freigeben: 2022-11-10 17:43:33
nach vorne
2601 Leute haben es durchsucht

Dieser Artikel bringt Ihnen relevantes Wissen über das WeChat Mini-Programm, das hauptsächlich die relevanten Inhalte zum Listen-Rendering vorstellt. Ich hoffe, es wird für alle hilfreich sein.

Listendarstellung der WeChat-Applet-Beispieleinführung

【Verwandte Lernempfehlung: Mini-Programm-Lern-Tutorial

wx:for

Über wx:for können Sie eine Schleife ausführen, um wiederholte Komponentenstrukturen basierend auf dem angegebenen Array zu rendern. Das Syntaxbeispiel lautet wie folgt:

<view> 
    索引是:{{index}} 当前项是:{{item}}
</view>
Nach dem Login kopieren
Nach dem Login kopieren

Standardmäßig wird der Index des aktuellen Schleifenelements durch index dargestellt; das aktuelle Schleifenelement wird durch item hacker.wxml dargestellt Definieren Sie eine for-Schleife, um auf das Array

<view> 
    索引是:{{index}} 当前项是:{{item}}
</view>
Nach dem Login kopieren
Nach dem Login kopieren

hacker.js zuzugreifen Definieren Sie ein Array

Page({    data:{        arr1:['a','b','c']
    }
})
Nach dem Login kopieren
Nach dem Login kopieren

Die Ergebnisse sind wie folgt:

Listendarstellung der WeChat-Applet-Beispieleinführung

Manuell den Index und den Variablennamen des aktuellen Elements angeben

Verwenden Sie wx:for-index, um den Variablennamen des Index des aktuellen Schleifenelements anzugeben Verwenden Sie wx:for-item, um den Variablennamen des aktuellen Elements anzugeben Der Beispielcode lautet wie folgt:

<view>
    索引是:{{idx}}  当前项是:{{itemName}}
</view>
Nach dem Login kopieren
Nach dem Login kopieren

hacker.wxml

<view>
    索引是:{{idx}}  当前项是:{{itemName}}
</view>
Nach dem Login kopieren
Nach dem Login kopieren

hacker.js

Page({    data:{        arr1:['a','b','c']
    }
})
Nach dem Login kopieren
Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt: Listendarstellung der WeChat-Applet-Beispieleinführung

wx:key use

ähnelt :key beim Rendern von Vue-Listen, wenn die Das Applet implementiert das Listen-Rendering. Es wird außerdem empfohlen, einen eindeutigen Schlüsselwert für die gerenderten Listenelemente anzugeben, um die Rendering-Effizienz zu verbessern. Der Beispielcode lautet wie folgt: hacker.wxml

<view>{{item.name}}</view>
Nach dem Login kopieren

hacker.js

Page({    data:{        userList:[
            {id: 1,name: 'hacker'},
            {id: 2,name: 'meng'},
            {id: 3,name: 'yuan'}
        ]
    }
})
Nach dem Login kopieren

Die laufenden Ergebnisse sind wie folgt :Listendarstellung der WeChat-Applet-Beispieleinführung[Verwandte Lernempfehlungen:Miniprogramm-Lerntutorial

Das obige ist der detaillierte Inhalt vonListendarstellung der WeChat-Applet-Beispieleinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.im
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage