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


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 相关文章推荐
Jquery cookie操作代码
Mar 14 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
webpack实用小功能介绍
Jan 02 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
浅谈webpack SplitChunksPlugin实用指南
2018/09/17 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python实现邮件自动发送
2019/08/10 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python中安装django模块的方法
2020/03/12 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
护理专业毕业生自荐信范文
2014/01/05 职场文书
党员学习十八大感想
2014/01/17 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
道路建设实施方案
2014/03/18 职场文书
故宫英文导游词
2015/01/31 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
幼儿园保育员随笔
2015/08/14 职场文书