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数据加载测试地址：https://jsfiddle.net/zhoou/96mnckgL/

总结：还是自己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实现起来很简单-- <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制作加载更多功能的正确打开方式

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

  • 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

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

    js实现加载更多功能实例

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

  • Android RecyclerView上拉加载更多功能回弹实现代码

    Android RecyclerView上拉加载更多功能回弹实现代码

    实现原理是使用RecyclerView的OnTouchListener方法监听滑动 在adapter里面增加两项footview 其中date.size为显示的加载条,可以自定义,date.size+1为空白的View,我们设置其高度为0 我们通过LinearLayoutManager的 findLastVisibleItemPosition判断显示的最后一条数据,如果是空白view,表示加载条已经完全展示,松开即可刷新. 回弹效果是通过在滑动时动态改变空白view的高度,达到阻尼效果 ,回弹时

  • Android Recyclerview实现上拉加载更多功能

    Android Recyclerview实现上拉加载更多功能

    在项目中使用列表的下拉刷新和上拉加载更多是很常见的功能,下拉刷新我们可以用Android自带的SwipeRefreshLayout这个很好解决.但是上拉加载更多就要去找一些框架了,刚开始的时候我找到一个Mugen的github开源框架,但是有个问题,当页面能够一次加载全部item的时候,上拉加载的功能就失效了. 这是因为当界面一次能够加载完全部item的时候,继续往上拉,Recyclerview的滑动监听,中的onScrolled方法只会在页面加载的时候调用一次,只后就不会被调用了,并且dy=0

  • vue底部加载更多的实例代码

    vue底部加载更多的实例代码

    要实现的效果如下: <template> <div class="newsList"> <div v-for="(items, index) in newsList"> <div class="date">{{showDay(index)}}</div> <div class="list" > <ul> <li class="l

  • Flutter 给列表增加下拉刷新和上滑加载更多功能

    Flutter 给列表增加下拉刷新和上滑加载更多功能

    有状态组件 当 Flutter 的页面需要动态更新数据的时候,就会涉及到 UI 组件需要根据数据变化更新,此时也就意味着组件有了"状态".这就类似 React 的类组件和函数组件(只是后续 React 使用了勾子函数实现了函数组件也可以有状态).在 Flutter 中,组件也分为无状态组件(StatelessWidget)和有状态组件(StatefulWidget),一般尽量使用无状态组件.但是如果组件本身需要维护自身状态的时候,就需要使用有状态组件了.有状态组件的定义形式如下: //

  • iOS实现无感知上拉加载更多功能的思路与方法

    iOS实现无感知上拉加载更多功能的思路与方法

    目录 什么是无感知上拉加载更多 如何实现无感知上拉加载更多 网上的思路(一) 网上的思路(二) MJRefresh代码的追根朔源 总结 什么是无感知上拉加载更多 什么是无感知,这个这样理解:在网络情况正常的情况下,用户对列表进行连续的上拉时,该列表可以无卡顿不停再见新的数据. 如果要体验话,Web端很多已经做到了,比如掘金的首页,还有比如i掘金iOS的App,列表都是无感知的. 说来惭愧,写了这久的代码,还真的没有认真思考这个功能怎么实现. 如何实现无感知上拉加载更多 我在看见这位网友留言的时候

随机推荐