详解vue模拟加载更多功能（数据追加）
更新时间：2017年06月23日 10:07:14 作者：太羽
本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用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数据加载测试效果如下：
总结：还是自己js基础知识不扎实，push和concat两个函数用法没有搞清楚，如果你有更好的方法欢迎讨论。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇解决vue中使用Axios调用接口时出现的ie数据处理问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于Vue单页面骨架屏实践的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
Vue API中setup ref reactive函数使用教程
setup是用来写组合式api，内部的数据和方法需要通过return之后，模板才能使用。在之前vue2中，data返回的数据，可以直接进行双向绑定使用，如果我们把setup中数据类型直接双向绑定，发现变量并不能实时响应。接下来就详细看看它们的使用2022-12-12
下面小编就为大家带来一篇vue中实现滚动加载更多的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue 在服务器端直接修改请求的接口地址的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析
由于package.json 文件中 vue、vue-template-compiler 版本号前面 多了个 ^ 导致实际导入时，node_module中的 vue 版本可能被升级为 2.7.x，这篇文章主要介绍了vue2 使用@vue/composition-api依赖包 编译、打包各种报错问题分析,需要的朋友可以参考下2023-01-01
通过vue-cli来学习修改Webpack多环境配置和发布问题
这篇文章主要介绍了随着Vue-cli来'学'并'改'Webpack之多环境配置和发布的相关知识,本文将会根据一些实际的业务需求，先学习vue-cli生成的模版，然后在进行相关修改，感兴趣的朋友一起跟着小编学习吧2017-12-12
在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了Vue props传递的类型和写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文主要给大家介绍如何vue实现图片拖拽及鼠标滚轮放大缩小,文中有详细的代码供大家参考,对我们的学习或工作有一定的帮助,需要的朋友可以参考下2023-08-08
最新评论