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


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 相关文章推荐
双击滚屏-常用推荐
Nov 29 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
node.js实现登录注册页面
Apr 08 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 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分页代码实例
2013/10/24 PHP
php对数组排序的简单实例
2013/12/25 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
WAF的正确bypass
2017/01/05 PHP
PHP查询分页的实现代码
2017/06/09 PHP
php-fpm中max_children的配置
2019/03/15 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
python二叉树的实现实例
2013/11/21 Python
python迭代器的使用方法实例
2013/11/21 Python
浅析使用Python操作文件
2017/07/31 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
网络安全方面的面试题
2015/11/04 面试题
2015年销售内勤工作总结
2015/04/27 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis