详解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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
SVG实现时钟效果
Jul 17 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 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
生成sessionid和随机密码的例子
2006/10/09 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
如何在Laravel之外使用illuminate组件详解
2020/09/20 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Javascript 解疑
2009/11/11 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
对Python 内建函数和保留字详解
2018/10/15 Python
python的launcher用法知识点总结
2020/08/07 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
python 深度学习中的4种激活函数
2020/09/18 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
新教师工作感言
2014/02/16 职场文书
就业意向书范文
2014/04/01 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
售后服务承诺书模板
2014/05/21 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书