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


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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
Javascript实现的分页函数
Dec 22 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解webpack 多入口配置
Jun 16 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
JavaScript实现一键复制内容剪贴板
Jul 23 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
第五章 php数组操作
2011/12/30 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python Cartopy的基础使用详解
2020/11/01 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
《散步》教学反思
2014/03/02 职场文书
团拜会策划方案
2014/06/07 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书