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


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 ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
layUI的验证码功能及校验实例
Oct 25 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
python对字典进行排序实例
2014/09/25 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解django中使用定时任务的方法
2018/09/27 Python
实时获取Python的print输出流方法
2019/01/07 Python
python 实现多维数组(array)排序
2020/02/28 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
业务总经理岗位职责
2014/02/03 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
Python爬虫基础初探selenium
2021/05/31 Python