详解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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
uni-app从安装到卸载的入门教程
May 15 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
一个ftp类(ini.php)
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php实现购物车功能(上)
2020/07/23 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
自写的一个jQuery圆角插件
2010/10/26 Javascript
js Calender控件使用详解
2015/01/05 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
python实现大学人员管理系统
2019/10/25 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
自荐信如何“自荐”
2013/10/24 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
专营店会计助理岗位职责
2013/11/29 职场文书
住宅质量保证书
2014/04/29 职场文书
党性心得体会
2014/09/03 职场文书
毕业生见习报告总结
2014/11/08 职场文书
党员转正意见怎么写
2015/06/03 职场文书
领导干部学习心得体会
2016/01/23 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
SpringBoot快速入门详解
2021/07/21 Java/Android
MySQL查询日期时间
2022/05/15 MySQL