详解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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue 注册组件的使用详解
May 05 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
echarts饼图各个板块之间的空隙如何实现
Dec 01 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生成UTF8文件的方法
2010/05/15 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
python中shell执行知识点
2020/05/06 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
深圳-东方伟业笔试部分
2015/02/11 面试题
测绘工程个人的自我评价
2013/11/10 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
社区护士演讲稿
2014/08/27 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
匿名信格式范文
2015/05/27 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL