详解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 Select标记中options操作方法集合
Oct 22 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
JavaScript canvas实现文字时钟
Jan 10 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连接access数据库
2008/03/27 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
javascript中的面向对象
2017/03/30 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python错误处理操作示例
2018/07/18 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
基于python的列表list和集合set操作
2019/11/24 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
关于VPN
2012/06/10 面试题
农救科工作职责
2013/11/27 职场文书
暑期实践思想汇报
2014/01/06 职场文书
单位委托书范本
2014/04/04 职场文书
市政管理求职信范文
2014/05/07 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
Python进度条的使用
2021/05/17 Python
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL