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


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 backgroundImage控制
May 19 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
详解vue表单——小白速看
Apr 08 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php curl模拟post请求小实例
2013/11/13 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
python实现简单socket通信的方法
2016/04/19 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python切片操作实例分析
2018/03/16 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
华润集团网上药店:健一网
2016/09/19 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
化妆品活动策划方案
2014/05/23 职场文书
银行求职信
2014/05/31 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
学籍证明模板
2014/11/21 职场文书
财务总监岗位职责
2015/02/03 职场文书
酒店厨房管理制度
2015/08/06 职场文书
学习十八大的感悟
2015/08/11 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Java Spring Lifecycle的使用
2022/05/06 Java/Android