微信小程序 循环及嵌套循环的使用总结
微信小程序 循环及嵌套循环的使用总结
关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难。
对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环。
对于我们在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) } } }
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序下拉刷新界面的实现
微信小程序下拉刷新界面的实现 利用onPullDownRefresh函数设置下拉刷新功能 一.在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true } 或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true { "enablePullDownRefresh": true } 二.利
-
微信小程序之蓝牙的链接
微信小程序之蓝牙的链接 微信小程序蓝牙连接2.0说明: 1.本版本区分了ANDROID和IOS系统下蓝牙连接的不同方式. 2.兼容了更多情况下的链接包括: (1)未开启设备蓝牙,当监听到开启了蓝牙后自动开始连接. (2)初始化蓝牙失败后每3000ms自动重新初始化蓝牙适配器. (3)安卓端开启蓝牙适配器扫描失败,每3000ms自动重新开启. (4)IOS端获取已连接蓝牙设备为空,每3000ms自动重新获取. (5)安卓端蓝牙开始链接后中断扫描,连接失败了,重新开始扫描. (6)IOS端开始连接设
-
微信小程序getPhoneNumber获取用户手机号
微信小程序getPhoneNumber获取用户手机号 小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"
-
Thinkphp5微信小程序获取用户信息接口的实例详解
Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le
-
微信小程序中post方法与get方法的封装
微信小程序开发post方法与get方法的封装 第一步:在utils文件夹下创建httpUtil.js文件 第二步:创建函数httpPost方法代码如下: function Post(url, data, cb, isShow, showNetError, that, showLoading) { if (showLoading == true || showLoading == undefined){ wx.showNavigationBarLoading(); wx.showLoading({
-
微信小程序报错:this.setData is not a function的解决办法
微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入
-
微信小程序开发之好友列表字母列表跳转对应位置
微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc
-
微信小程序 循环及嵌套循环的使用总结
微信小程序 循环及嵌套循环的使用总结 关于微信小程序,最近被安排做微信小程序,首次接触,总体来说上手不是太困难. 对于小程序的循环问题颇有感触,因为自己绑定数据到界面无数次用到循环和嵌套循环. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中定义的对象中: //首页话题列表 wx.request({ url: 'https://*******************', method: 'POST', data: { pageNum: 1, pageSize: 10 },
-
微信小程序实现跟随菜单效果和循环嵌套加载数据
本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&
-
微信小程序实现循环动画效果
在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的"关注公众号"动画就是我们要实现的效果. 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明:创建一个动画实例animation.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画
-
微信小程序中页面FOR循环和嵌套循环
微信小程序中页面FOR循环和嵌套循环 单个循环 <view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}"> <view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}"> //判断name是否为null <view class="tr"> <view class="td-lef
-
微信小程序获取循环元素id以及wx.login登录操作
微信小程序获取循环元素id以及wx.login登录操作 通过点击方法获取循环数据元素的id例: wxml里: <view id="list" wx:for="{{txt}}" > <text id="L_name">{{item.name}}</text> <text id="L_price">¥{{item.price}}/{{item.unit}}</text>
-
微信小程序实现给循环列表添加点击样式实例
微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie
-
微信小程序开发之animation循环动画实现的让云朵飘效果
本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
-
微信小程序之前台循环数据绑定
微信小程序之前台循环数据绑定 微信小程序的循环数据绑定到wxml例: wxml里: <view wx:for="{{array}}"> {{item.message}} </view> 通过上面的wx.for可以绑定一个数组,数组是json类型的:默认的索引序号是item,所以用{{item.message}} 显示数据js里: data: { array: [ { "message": "foot", "txt
-
微信小程序使用for循环动态渲染页面操作示例
本文实例讲述了微信小程序使用for循环动态渲染页面操作.分享给大家供大家参考,具体如下: 先来看看运行效果: 这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了 其实也很简单,我就直接上代码了 wxml部分: <view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text
-
微信小程序 wx:for遍历循环使用实例解析
这篇文章主要介绍了微信小程序 wx:for遍历循环使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图如下: 实现代码如下: type.js: // pages/type/type.js Page({ /** * 页面的初始数据 */ data: { types: "" }, editType: function (e) { var typeId = e.currentTarget.dataset['id']; cons
随机推荐
- 使用Lable控件输出九九乘法表
- MySQL恢复中的几个问题解决方法
- 在不刷新页面的情况下调用远程asp脚本
- 详解Ruby语言中的注释用法与中文编码问题
- 花生壳与Windows 2003单网卡用花生壳实现VPN的图文教程第1/3页
- 深刻理解Oracle数据库的启动和关闭
- 关于PHP定时发送服务的解决办法
- Python实现并行抓取整站40万条房价数据(可更换抓取城市)
- JavaScript运行时库属性一览表
- Android自定义手机界面状态栏实例代码
- JavaScript中数据类型转换总结
- jQuery使用$.ajax进行即时验证实例详解
- 设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
- 垃圾站全教程--之一(新手上路)
- android Listview模拟聊天界面
- 基于Java代码实现游戏服务器生成全局唯一ID的方法汇总
- EditText限制输入数字,精确到小数点后1位的设置方法
- python中Apriori算法实现讲解
- android使用AIDL跨进程通信(IPC)
- pycharm重置设置,恢复默认设置的方法