详解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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
原生js简单实现放大镜特效
May 16 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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 Hash函数,增强密码安全
2011/02/25 PHP
用php解析html的实现代码
2011/08/08 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
分享PHP守护进程类
2015/12/30 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python的concat等多种用法详解
2018/11/28 Python
python统计中文字符数量的两种方法
2019/01/31 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
介绍一下write命令
2012/09/24 面试题
光荣入党自我鉴定
2014/01/22 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
交通处罚决定书
2015/06/24 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技