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


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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue多次循环操作示例
Feb 08 Javascript
javascript实现小型区块链功能
Apr 03 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
星际争霸秘籍
2020/03/04 星际争霸
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现配置文件备份的方法
2015/07/30 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
暑期实习鉴定
2013/12/16 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技