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