详解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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js实现目录定位正文示例
Nov 14 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
js中数组的常用方法小结
Dec 30 Javascript
Javascript实现基本运算器
Jul 15 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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
图解上海144收音机
2021/03/02 无线电
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python实战教程之自动扫雷
2018/07/13 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python修改列表值问题解决方案
2020/03/06 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
家长会主持词开场白
2014/03/18 职场文书
爱牙日活动总结
2014/08/29 职场文书
小学生毕业评语
2014/12/26 职场文书
开学典礼校长致辞
2015/07/29 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android