详解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 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 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
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
浅谈vue 单文件探索
2018/09/05 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
车间班组长岗位职责
2013/11/13 职场文书
会计学生自我鉴定
2014/02/06 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
基层工作经验证明样本
2014/11/16 职场文书