溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

微信小程序 wx:for的使用實(shí)例詳解

發(fā)布時(shí)間：2020-09-19 06:19:43 來源：腳本之家 閱讀：218 作者：萌神哆啦A夢 欄目：web開發(fā)

微信小程序 wx:for的使用實(shí)例詳解

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

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

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 = “”，“”中寫當(dāng)前小程序js頁面中data的對象名。

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

微信小程序 wx:for的使用實(shí)例詳解

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手