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


Posted in Javascript onApril 27, 2017

微信小程序 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的使用实例详解

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

Javascript 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
详解axios在node.js中的post使用
Apr 27 #Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
动态表格Table类的实现
2009/08/26 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
python cookielib 登录人人网的实现代码
2012/12/19 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
主题酒店策划书
2014/01/28 职场文书
年终晚会主持词
2014/03/25 职场文书
学校安全责任书
2014/04/14 职场文书
国际金融专业自荐信
2014/07/05 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js