微信小程序教程之列表渲染

更新時間：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>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

Three.js引用和環(huán)境搭建過程詳解
這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
國慶節(jié)到了,利用JS實現一個生成國慶風頭像的小工具詳解實現過程
明天就是國慶節(jié)了，最近看到好多好友換了國慶風的頭像，感覺這個挺有意思，就找到了類似的源碼研究了一番，并進行了改造（并非原創(chuàng)，只是進行了改造，只要想分享一下實現思路）。下面就來看看如何實現一鍵生成國慶風頭像小工具。
2021-09-09
微信小程序 canvas API詳解及實例代碼
這篇文章主要介紹了微信小程序 canvas API詳解及實例代碼的相關資料,需要的朋友可以參考下
2016-10-10
uniapp自定義相機實現示例詳解
這篇文章主要為大家介紹了uniapp自定義相機實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
微信小程序 wx:key詳細介紹
這篇文章主要介紹了微信小程序 wx:key詳細介紹的相關資料,并附簡單代碼實例，幫助大家學習理解，需要的朋友可以參考下
2016-10-10
快速保存網頁中所有圖片的方法
快速保存網頁中所有圖片的方法...
2006-06-06
前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
微信小程序教程之列表渲染
這篇文章主要介紹了微信小程序列表渲染的相關資料,并附簡單代碼實例，需要的朋友可以參考下
2016-10-10
微信小程序本地緩存數據增刪改查實例詳解
這篇文章主要介紹了微信小程序本地緩存數據增刪改查實例詳解的相關資料,需要的朋友可以參考下
2017-05-05
微信小程序觸控事件詳細介紹
這篇文章主要介紹了微信小程序觸控事件的相關資料,在開發(fā)微信小程序的時候，難免會用到這樣的功能，這里小編就幫大家梳理下相應的知識，需要的朋友可以參考下
2016-10-10