详解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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
AngularJS快速入门
Apr 02 Javascript
js简单倒计时实现代码
Apr 30 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
javascript关于继承解析
2016/05/10 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
jQuery解析json格式数据示例
2018/09/01 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
python选择排序算法实例总结
2015/07/01 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
Java程序员综合测试题
2014/04/25 面试题
招商经理岗位职责
2013/11/16 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript