详解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 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
js 幻灯片的实现
Dec 06 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
JS实现放烟花效果
Mar 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
laravel5.6实现数值转换
2019/10/23 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
Python中文件操作简明介绍
2015/04/13 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
浅析Python四种数据类型
2018/09/26 Python
python numpy元素的区间查找方法
2018/11/14 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python3多线程知识点总结
2019/09/26 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
人事专员岗位职责
2013/11/20 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python