微信小程序 循环及嵌套循环的使用总结


Posted in Javascript onSeptember 26, 2017

微信小程序 循环及嵌套循环的使用总结

关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难。

对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环。

对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中:

//首页话题列表 
   wx.request({ 
    url: 'https://*******************', 
    method: 'POST', 
    data: { 
     pageNum: 1, 
     pageSize: 10 
    }, 
    success:function(res){ 
     that.setData({ 
      listTop:res.data, 
       
     }) 
    } 
   })

在wxml文件中通过  

wx:for="{{listTop}}"

来实现循环输出对象中的数据,这里我们可以通过{{index }} 获取下标,也可以自定义下标:

wx:for-index="index2"

当listTop中存在对象com的时候,我们可以通过wx:for="{{item.com}}" 来实现循环该循环中的数据。

我在实际的项目中,遇到这样一个问题:在嵌套循环的过程中,我需要将某个字段的值进行转换,比如时间戳换成日期/几天前等,这个时候我们应该

知道微信小程序不支持界面直接调用JS,这个时候我们应该怎么解决:

起初自己饶了很大一个弯子,我总是想在JS中通过循环放到一个对象中,然后再在界面循环出来,其实前一步我已经接近结果了,但是实际开发中

自己作为刚入职不到一个月的新手还是有很多不足,所以自己陷入到死循环当中。

解决方案:在你遍历出来的时候,直接把原有的数据替换成想要的数据就行了。。。。(很简单,但是当局者迷,但是由于自己解决的,可能存在

更好的方法,这里仅作叙述)

for (var i = 0; i < res.data.data.length;i++){ 
    console.log(res.data.data[i].comments+"**********"+i)  
    
    console.log("***"+i) 
    if (res.data.data[i].comments !=null){ 
     for (var j = 0; j < res.data.data[i].comments.length;j++){ 
      res.data.data[i].comments[j].createTime=transDate(res.data.data[i].comments[j].createTime) 
     } 
    } 
     }

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
js实现div色块拖动录制
Jan 16 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Node.js dgram模块实现UDP通信示例代码
Sep 26 #Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 #Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 #Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 #Javascript
微信小程序url与token设置详解
Sep 26 #Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 #Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 #Javascript
You might like
转换中文日期的PHP程序
2006/10/09 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
基层工作经历证明
2014/01/13 职场文书
运动会领导邀请函
2014/02/05 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js