详解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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jQuery插件开发汇总
May 15 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
在Vue项目中使用Typescript的实现
Dec 19 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动态生成JavaScript代码
2009/03/09 PHP
php中opendir函数用法实例
2014/11/15 PHP
php实现URL加密解密的方法
2016/11/17 PHP
Jquery cookie操作代码
2010/03/14 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
原生JS轮播图插件
2017/02/09 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
python绘制简单折线图代码示例
2017/12/19 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
前台文员岗位职责
2013/12/28 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
信息合作协议书
2014/10/09 职场文书
公司欠款证明
2015/06/24 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Vue router配置与使用分析讲解
2022/12/24 Vue.js