微信小程序 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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
elementUI中Table表格问题的解决方法
Dec 04 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
c#中的实现php中的preg_replace
2009/12/21 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
Gird事件机制初级读本
2007/03/10 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
针对初学者的jQuery入门指南
2015/08/15 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python线程池threadpool使用篇
2018/04/27 Python
python爬虫超时的处理的实例
2018/12/19 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
基于python实现操作redis及消息队列
2020/08/27 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
十佳中学生事迹材料
2014/06/02 职场文书
单位消防安全责任书
2014/07/23 职场文书
出纳工作检讨书
2014/10/18 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
获奖感言范文
2015/07/31 职场文书
nginx之queue的具体使用
2022/06/28 Servers