详解vue模拟加载更多功能(数据追加)


Posted in Javascript onJune 23, 2017

使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组。

//这是错误的写法
$.ajax({ 
    type:'get',
    async:false,
    url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
    dataType: "json",
    success: function(msg){
     _self.$set('loadMore', msg);
     _self.conList.push(_self.loadMore);
    }
   });
//这是正确的写法
$.ajax({ 
    type:'get',
    async:false,
    url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2',
    dataType: "json",
    success: function(msg){
     _self.$set('main',_self.main.concat(msg))
    }
   });

模拟ajax数据加载测试效果如下:

详解vue模拟加载更多功能(数据追加)

详解vue模拟加载更多功能(数据追加)

总结:还是自己js基础知识不扎实,push和concat两个函数用法没有搞清楚,如果你有更好的方法欢迎讨论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
Postman环境变量全局变量使用方法详解
Aug 13 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 #Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 #Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
js实现城市级联菜单的2种方法
Jun 23 #Javascript
JS使用正则表达式验证身份证号码
Jun 23 #Javascript
创建简单的node服务器实例(分享)
Jun 23 #Javascript
详解微信小程序 template添加绑定事件
Jun 23 #Javascript
You might like
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
PHP伪造referer实例代码
2008/09/20 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
Yii快速入门经典教程
2015/12/28 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
JavaScript快速调试的两个技巧
2020/11/04 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
python pytest进阶之fixture详解
2019/06/27 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
技术副厂长岗位职责
2013/12/26 职场文书
简单英文演讲稿
2014/01/01 职场文书
晚会开幕词
2015/01/28 职场文书
机械生产实习心得体会
2016/01/22 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Fluentd搭建日志收集服务
2022/09/23 Servers