微信小程序 教程之列表渲染
更新時間：2016年10月18日 10:28:54 投稿：lqh
這篇文章主要介紹了微信小程序 列表渲染的相關(guān)資料,并附簡單代碼實例，需要的朋友可以參考下
系列文章：
微信小程序 教程之WXSS
微信小程序 教程之引用
微信小程序 教程之事件
微信小程序 教程之模板
微信小程序 教程之列表渲染
微信小程序 教程之條件渲染
微信小程序 教程之?dāng)?shù)據(jù)綁定
微信小程序 教程之WXML
wx:for
在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
默認數(shù)組的當(dāng)前項的下標變量名默認為index，數(shù)組當(dāng)前項的變量名默認為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)前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for也可以嵌套，下邊是一個九九乘法表
<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/>標簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript的提攜小技巧，如：過濾唯一值、短路求值、轉(zhuǎn)換Boolean型等等，想詳情了解的小伙伴請參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要介紹了JavaScript內(nèi)置對象,內(nèi)置對象就是指?JS?語言自帶的一些對象，這些對象供開發(fā)者使用，并提供了一些常用的或是最基本而必要的功能,下面我們一起進入文章了解更多詳細內(nèi)容2021-12-12
制作特殊字的腳本...2006-06-06
這篇文章主要為大家介紹了JS開發(fā)前端團隊展示控制器實現(xiàn)為成員引流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錨點定位樓層跳躍的實例的相關(guān)資料,需要的朋友可以參考下2017-05-05
顏色選擇: ColorMatch 5K...2006-12-12
這篇文章主要介紹了微信小程序?qū)嵉姆诸愴撁嬷谱鞯南嚓P(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 chooseImage選擇圖片或者拍照的相關(guān)資料,需要的朋友可以參考下2017-04-04
JS觸摸屏網(wǎng)頁版仿app彈窗型滾動列表選擇器/日期選擇器
這篇文章主要介紹了觸摸屏網(wǎng)頁版仿app彈窗型滾動列表選擇器/日期選擇器的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
判斷Spartacus?SSR的Transfer?State是否正常工作技巧
這篇文章主要為大家介紹了判斷Spartacus?SSR的Transfer?State是否正常工作技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10