微信小程序 教程之列表渲染
系列文章：
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之條件渲染
微信小程序 教程之?dāng)?shù)據(jù)綁定
微信小程序 教程之WXML
wx:for
在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。
默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
Page({
items: [{
message: 'foo',
},{
message: 'bar'
}]
})
使用wx:for-item可以指定數(shù)組當(dāng)前元素的變量名
使用wx:for-index可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for也可以嵌套，下邊是一個(gè)九九乘法表
<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>
block wx:for
類似block wx:if，也可以將wx:for用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
Three.js引用和環(huán)境搭建過(guò)程詳解
這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
國(guó)慶節(jié)到了,利用JS實(shí)現(xiàn)一個(gè)生成國(guó)慶風(fēng)頭像的小工具 詳解實(shí)現(xiàn)過(guò)程
明天就是國(guó)慶節(jié)了，最近看到好多好友換了國(guó)慶風(fēng)的頭像，感覺(jué)這個(gè)挺有意思，就找到了類似的源碼研究了一番，并進(jìn)行了改造（并非原創(chuàng)，只是進(jìn)行了改造，只要想分享一下實(shí)現(xiàn)思路）。下面就來(lái)看看如何實(shí)現(xiàn)一鍵生成國(guó)慶風(fēng)頭像小工具。​2021-09-09
這篇文章主要介紹了微信小程序 canvas API詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了uniapp自定義相機(jī)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 wx:key詳細(xì)介紹的相關(guān)資料,并附簡(jiǎn)單代碼實(shí)例，幫助大家學(xué)習(xí)理解，需要的朋友可以參考下2016-10-10
快速保存網(wǎng)頁(yè)中所有圖片的方法...2006-06-06
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了微信小程序 列表渲染的相關(guān)資料,并附簡(jiǎn)單代碼實(shí)例，需要的朋友可以參考下2016-10-10
微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解
這篇文章主要介紹了微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 觸控事件的相關(guān)資料,在開(kāi)發(fā)微信小程序的時(shí)候，難免會(huì)用到這樣的功能，這里小編就幫大家梳理下相應(yīng)的知識(shí)，需要的朋友可以參考下2016-10-10