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


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 相关文章推荐
js创建对象的方式总结
Jan 10 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
JavaScript中string对象
Jun 12 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
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
mysql_escape_string()函数用法分析
2016/04/25 PHP
php实现头像上传预览功能
2017/04/27 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
Seajs的学习笔记
2014/03/04 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
javascript每日必学之继承
2016/02/23 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python使用递归的方式建立二叉树
2019/07/03 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
说出数据连接池的工作机制是什么?
2013/04/19 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
员工评语大全
2014/01/19 职场文书
小学二年级评语
2014/04/21 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python