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


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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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中实现进程间通讯
2006/10/09 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php基础学习之变量的使用
2011/06/09 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
前台接待的工作职责
2013/11/21 职场文书
经济学博士求职自荐信范文
2013/11/23 职场文书
后勤主管工作职责
2013/12/07 职场文书
会计师职业生涯规划范文
2014/02/18 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
请客吃饭开场白
2015/06/01 职场文书
《春酒》教学反思
2016/02/22 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
python中 Flask Web 表单的使用方法
2022/05/20 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
git stash(储藏)的用法总结
2022/06/25 Servers