篇首語(yǔ)：本文由編程筆記#小編為大家整理，主要介紹了微信小程序列表渲染相關(guān)的知識(shí)，希望對(duì)你有一定的參考價(jià)值。愛(ài)掏網(wǎng) - it200.com

?作者簡(jiǎn)介&＃xff1a;CSDN內(nèi)容合伙人、阿里云專(zhuān)家博主、51CTO專(zhuān)家博主&＃x1f3c6;
&＃x1f4c3;個(gè)人主頁(yè)&＃xff1a;hacker707的csdn博客
&＃x1f525;系列專(zhuān)欄&＃xff1a;微信小程序&＃x1f947;
&＃x1f4ac;個(gè)人格言&＃xff1a;不斷的翻越一座又一座的高山&＃xff0c;那樣的人生才是我想要的。愛(ài)掏網(wǎng) - it200.com這一馬平川&＃xff0c;一眼見(jiàn)底的活&＃xff0c;我不想要,我的人生&＃xff0c;我自己書(shū)寫(xiě)&＃xff0c;余生很長(zhǎng)&＃xff0c;請(qǐng)多關(guān)照&＃xff0c;我的人生&＃xff0c;敬請(qǐng)期待&＃x1f496;&＃x1f496;&＃x1f496;

列表渲染

• wx:for
• 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名
• wx:key的使用
• 結(jié)束語(yǔ)&＃x1f947;

wx:for

通過(guò)wx:for可以根據(jù)指定的數(shù)組&＃xff0c;循環(huán)渲染重復(fù)的組件結(jié)構(gòu)&＃xff0c;語(yǔ)法示例如下&＃xff1a;

view wx:for&＃61;"array">
索引是&＃xff1a;index 當(dāng)前項(xiàng)是&＃xff1a;item
/view>


默認(rèn)情況下&＃xff0c;當(dāng)前循環(huán)項(xiàng)的索引用index表示&＃xff1b;當(dāng)前循環(huán)項(xiàng)用item表示
?hacker.wxml
定義一個(gè)for循環(huán)訪問(wèn)數(shù)組

view wx:for&＃61;"arr1">
索引是&＃xff1a;index 當(dāng)前項(xiàng)是&＃xff1a;item
/view>


?hacker.js
定義一個(gè)數(shù)組

Page(
data:
arr1:[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;]

)


&＃x1f431;?&＃x1f3cd;運(yùn)行結(jié)果如下&＃xff1a;

手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名

使用wx:for-index可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名
使用wx:for-item可以指定當(dāng)前項(xiàng)的變量名
示例代碼如下&＃xff1a;

view wx:for&＃61;"array" wx:for-index&＃61;"idx" wx:for-item&＃61;"itemName">
索引是&＃xff1a;idx 當(dāng)前項(xiàng)是&＃xff1a;itemName
/view>


?hacker.wxml

view wx:for&＃61;"arr1" wx:for-index&＃61;"idx" wx:for-item&＃61;"itemName">
索引是&＃xff1a;idx 當(dāng)前項(xiàng)是&＃xff1a;itemName
/view>


?hacker.js

Page(
data:
arr1:[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;]

)


&＃x1f431;?&＃x1f3cd;運(yùn)行結(jié)果如下&＃xff1a;

wx:key的使用

類(lèi)似于Vue列表渲染中的:key&＃xff0c;小程序在實(shí)現(xiàn)列表渲染時(shí)&＃xff0c;也建議為渲染出來(lái)的列表項(xiàng)指定唯一的key值&＃xff0c;從而提高渲染的效率&＃xff0c;示例代碼如下&＃xff1a;
?hacker.wxml

view wx:for&＃61;"userList" wx:key&＃61;"id">item.name/view>


?hacker.js

Page(
data:
userList:[
id: 1,name: &＃39;hacker&＃39;,
id: 2,name: &＃39;meng&＃39;,
id: 3,name: &＃39;yuan&＃39;
]

)


&＃x1f431;?&＃x1f3cd;運(yùn)行結(jié)果如下&＃xff1a;

結(jié)束語(yǔ)&＃x1f947;

以上就是微信小程序之列表渲染
持續(xù)更新微信小程序教程&＃xff0c;歡迎大家訂閱系列專(zhuān)欄&＃x1f525;微信小程序
你們的支持就是hacker創(chuàng)作的動(dòng)力&＃x1f496;&＃x1f496;&＃x1f496;