篇首語：本文由編程筆記#小編為大家整理，主要介紹了微信小程序列表渲染相關(guān)的知識，希望對你有一定的參考價值。愛掏網(wǎng) - it200.com
?作者簡介&＃xff1a;CSDN內(nèi)容合伙人、阿里云專家博主、51CTO專家博主&＃x1f3c6;
&＃x1f4c3;個人主頁&＃xff1a;hacker707的csdn博客
&＃x1f525;系列專欄&＃xff1a;微信小程序&＃x1f947;
&＃x1f4ac;個人格言&＃xff1a;不斷的翻越一座又一座的高山&＃xff0c;那樣的人生才是我想要的。愛掏網(wǎng) - it200.com這一馬平川&＃xff0c;一眼見底的活&＃xff0c;我不想要,我的人生&＃xff0c;我自己書寫&＃xff0c;余生很長&＃xff0c;請多關(guān)照&＃xff0c;我的人生&＃xff0c;敬請期待&＃x1f496;&＃x1f496;&＃x1f496;
列表渲染
- wx:for
- 手動指定索引和當(dāng)前項的變量名
- wx:key的使用
- 結(jié)束語&＃x1f947;
wx:for
通過wx:for可以根據(jù)指定的數(shù)組&＃xff0c;循環(huán)渲染重復(fù)的組件結(jié)構(gòu)&＃xff0c;語法示例如下&＃xff1a;
view wx:for&＃61;"array">
索引是&＃xff1a;index 當(dāng)前項是&＃xff1a;item
/view>
默認(rèn)情況下&＃xff0c;當(dāng)前循環(huán)項的索引用index表示&＃xff1b;當(dāng)前循環(huán)項用item表示
?hacker.wxml
定義一個for循環(huán)訪問數(shù)組
view wx:for&＃61;"arr1">
索引是&＃xff1a;index 當(dāng)前項是&＃xff1a;item
/view>
?hacker.js
定義一個數(shù)組
Page(
data:
arr1:[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;]
)
&＃x1f431;?&＃x1f3cd;運行結(jié)果如下&＃xff1a;
手動指定索引和當(dāng)前項的變量名
使用wx:for-index可以指定當(dāng)前循環(huán)項的索引的變量名
使用wx:for-item可以指定當(dāng)前項的變量名
示例代碼如下&＃xff1a;
view wx:for&＃61;"array" wx:for-index&＃61;"idx" wx:for-item&＃61;"itemName">
索引是&＃xff1a;idx 當(dā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)前項是&＃xff1a;itemName
/view>
?hacker.js
Page(
data:
arr1:[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;]
)
&＃x1f431;?&＃x1f3cd;運行結(jié)果如下&＃xff1a;
wx:key的使用
類似于Vue列表渲染中的:key&＃xff0c;小程序在實現(xiàn)列表渲染時&＃xff0c;也建議為渲染出來的列表項指定唯一的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;運行結(jié)果如下&＃xff1a;
結(jié)束語&＃x1f947;
以上就是微信小程序之列表渲染
持續(xù)更新微信小程序教程&＃xff0c;歡迎大家訂閱系列專欄&＃x1f525;微信小程序
你們的支持就是hacker創(chuàng)作的動力&＃x1f496;&＃x1f496;&＃x1f496;
