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


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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php 获取本地IP代码
2013/06/23 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js select option对象小结
2013/12/20 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
javascript控制台详解
2015/06/25 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
高二学生评语大全
2014/04/25 职场文书
借款担保书范文
2014/05/13 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
合伙购房协议样本
2014/10/06 职场文书
酒店厨房管理制度
2015/08/06 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
详解Python flask的前后端交互
2022/03/31 Python