微信小程序 wx:for的使用實例詳解

在小程序的開發(fā)過程中，經(jīng)常會用到在前端頁面循環(huán)打印一個數(shù)組或者對象的數(shù)據(jù)，這樣的話就需要用wx：for來實現(xiàn)。

一般情況下，小程序的utils這個文件夾下，我們可以把本地的數(shù)據(jù)寫進去，封裝成.js文件，提供對外暴露的接口，然后讀取本地數(shù)據(jù)，這些在上一篇博客中有詳細介紹。我們最后說到寫好的本地數(shù)據(jù)可以另一個頁面讀取：

var fileData = require('../../utils/data.js')  Page({   data: {    showData: fileData.mtData().list,   },  })  

在data{}中賦值后，showData就可以直接在wxml中顯示了。接下來說下如何在wxml頁面用wx:for循環(huán)顯示數(shù)組，下面是示例：

<view class="item" wx:for="{{showData}}">  <view class="td">   {item.MTId}} {{item.status}}  </view> </view> 

wx：for = “”，“”中寫當前小程序js頁面中data的對象名。

實際效果圖（并非上述代碼實現(xiàn)）

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