微信小程序 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 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
用js简单提供增删改查接口
May 12 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 FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
laravel5.6实现数值转换
2019/10/23 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
教师读书活动总结
2014/05/07 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
幽灵公主观后感
2015/06/09 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js