详解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两个函数用法没有搞清楚，如果你有更好的方法欢迎讨论。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue loadmore 组件滑动加载更多源码解析

    上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载的功能. 既然都是加载更多,很多代码思想势必相似,主要区别在于上拉和滑动到底部这个操作上,所以,我们需要注意: 上拉加载是point指针touch触摸事件,现在因为是滑动加载,需要添加scroll事件去监听然后执行相应回调 上拉加载主要计算触摸滚动距离,滑动加载主要计算containe

  • vue2滚动条加载更多数据实现代码

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight.(兼容不同的浏览器). 代码: 1.vue的实现 html: <d

  • vue制作加载更多功能的正确打开方式

    使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组. //这是错误的写法 $.ajax({ type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType

  • vue实现一个移动端屏蔽滑动的遮罩层实例

    在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.prevent > </div> 对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10;

  • 详解vue模拟加载更多功能（数据追加）

    详解vue模拟加载更多功能（数据追加）

    使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该使用concat()拼接两个数组. //这是错误的写法 $.ajax({ type:'get', async:false, url:path+'no/noticeMobile/getSendNoticeList?imToken='+ getToken +'&pageFlag=2', dataType

  • 详解vue 动态加载并注册组件且通过 render动态创建该组件

    基于 iview Tabs 组件实现 功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue <template> <div class="content-left-menu"> <div class="item-contain layout-content"> <Tabs class="cmcc-ivu-tab2" t

  • vue loadmore组件上拉加载更多功能示例代码

    最近在做移动端h5页面,所以分页什么的就不能按照传统pc端的分页器的思维去做了,这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多,符合正常使用习惯. 首先简单写一下模板部分的html代码,,很简单清晰的逻辑: <template> <div class="loadmore"> <div class="loadmore__body"> <slot></slot> </div> <d

  • 通过原生vue添加滚动加载更多功能

    这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEventListener('scroll', this.handleScroll) }, destroyed () { window.removeEven

  • 详解Vue3如何加载动态菜单

    详解Vue3如何加载动态菜单

    目录 1. 整体思路 2. 实现细节 2.1 加载细节 2.2 getInfo 2.3 generateRoutes 1. 整体思路 首先我们来梳理下整体上的实现思路,首先一点:整体思路和 vhr 一模一样. 考虑到有的小伙伴可能已经忘记 vhr 中前端动态菜单的实现思路了,因此本文再和大家分析一下. 为了确保在所有的 .vue 文件中都能访问到到菜单数据,所以选择将菜单数据存入 vuex 中,vuex 是 vue 中一个存储数据的公共地方,所有的 .vue 文件都可以从 vuex 中读取到数据

  • 详解Spring ApplicationContext加载过程

    1.找准入口,使用ClassPathXmlApplicationContext的构造方法加载配置文件,用于加载classPath下的配置文件 //第一行,执行完成之后就完成了spring配置文件的加载,刷新spring上下文 ClassPathXmlApplicationContext context=new ClassPathXmlApplicationContext( "classpath:spring-mvc.xml"); //获取实例Bean Person person=con

  • 详解Android布局加载流程源码

    详解Android布局加载流程源码

    一.首先看布局层次 看这么几张图 我们会发现DecorView里面包裹的内容可能会随着不同的情况而变化,但是在Decor之前的层次关系都是固定的.即Activity包裹PhoneWindow,PhoneWindow包裹DecorView.接下来我们首先看一下三者分别是如何创建的. 二.Activity是如何创建的 首先看到入口类ActivityThread的performLaunchActivity方法: private Activity performLaunchActivity(Activi

  • js实现加载更多功能实例

    js实现加载更多功能实例

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

随机推荐