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


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 小型打飞机游戏实现原理说明
Oct 28 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
详解Vue template 如何支持多个根结点
Feb 10 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python实现转圈打印矩阵
2019/03/02 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python实现超市商品销售管理系统
2019/10/25 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
门诊挂号室室长岗位职责
2013/11/27 职场文书
大学生就业自荐书
2014/06/16 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
诚信高考倡议书
2019/06/24 职场文书