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


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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
node 版本切换的实现
2020/02/02 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
详解Vite的新体验
2021/02/22 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python模拟登陆实现代码
2017/06/14 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
计算机本科生自荐信
2013/10/15 职场文书
工艺工程师工作职责
2013/11/23 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
九年级语文教学反思
2014/02/04 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
家长对老师的评语
2014/04/18 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
运动会广播稿50字
2015/08/19 职场文书
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL