微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解

在小程序的开发过程中，经常会用到在前端页面循环打印一个数组或者对象的数据，这样的话就需要用wx：for来实现。

一般情况下，小程序的utils这个文件夹下，我们可以把本地的数据写进去，封装成.js文件，提供对外暴露的接口，然后读取本地数据，这些在上一篇博客中有详细介绍。我们最后说到写好的本地数据可以另一个页面读取：

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

在data{}中赋值后，showData就可以直接在wxml中显示了。接下来说下如何在wxml页面用wx:for循环显示数组，下面是示例：

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

wx：for = “”，“”中写当前小程序js页面中data的对象名。

实际效果图（并非上述代码实现）

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持！

您可能感兴趣的文章:

• 微信小程序wx:for和wx:for-item的用法详解
• 微信小程序 循环及嵌套循环的使用总结
• 微信小程序之前台循环数据绑定
• 微信小程序获取循环元素id以及wx.login登录操作
• 微信小程序开发之animation循环动画实现的让云朵飘效果
• 微信小程序中页面FOR循环和嵌套循环
• 微信小程序实现给循环列表添加点击样式实例
• 微信小程序 for 循环详解
• 微信小程序wx:for循环的实例详解