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


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 拖拉缩放效果
Dec 10 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
简单了解Vue computed属性及watch区别
Jul 10 Javascript
js 数据类型判断的方法
Dec 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
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
php通过各种函数判断0和空
2020/07/04 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
广告设计应届生求职信
2014/03/01 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
授权委托书格式范文
2014/08/02 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
python如何读取和存储dict()与.json格式文件
2022/06/25 Python