微信小程序 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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
微信小程序 动态传参实例详解
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怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中使用序列的方法
2015/08/03 Python
Python生成器以及应用实例解析
2018/02/08 Python
python 读入多行数据的实例
2018/04/19 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
详解Python 中的容器 collections
2020/08/17 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
酒店节能减排方案
2014/05/26 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS