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


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模拟超链接点击效果代码
Apr 21 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP面向对象法则
2012/02/23 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
Yii框架form表单用法实例
2014/12/04 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
nginx 设置多个站跨域
2021/03/09 Servers
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
python表格存取的方法
2018/03/07 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
NET程序员上机面试题
2015/05/23 面试题
社区青年志愿者活动总结
2015/05/06 职场文书
cf战队宣传语
2015/07/13 职场文书
安全责任协议书范本
2016/03/23 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python