详解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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
Jun 02 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
vue 导出文件,携带请求头token操作
Sep 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中动态显示签名和ip原理
2007/03/28 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
php 注释规范
2012/03/29 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中函数的用法实例教程
2014/09/08 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
利用python求积分的实例
2019/07/03 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python 实现兔子生兔子示例
2019/11/21 Python
python实现IOU计算案例
2020/04/12 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python归并排序算法过程实例讲解
2020/11/04 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
中文师范生自荐信
2014/01/30 职场文书
活动总结格式
2014/08/30 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
公司年夜饭通知
2015/04/25 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android