详解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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python自动zip压缩目录的方法
2015/06/28 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
运动会口号8字
2014/06/07 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers