使用vue-infinite-scroll实现无限滚动效果

vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。

https://github.com/ElemeFE/vue-infinite-scroll/

https://www.npmjs.com/package/vue-infinite-scroll

npm i vue-infinite-scroll --save

main.js使用

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
   <div class="loading">加载中...</div>
</div>

1.loadMore是方法，里面是要执行的代码

2.busy的值是true的时候，就不再加载，如果是false就执行加载

3.10表示距离底部为10 的时候就执行loadMore方法

loadMore () {
   this.busy = true
   //把busy置位true，这次请求结束前不再执行
   setTimeout(() => {
    this.page++
    this.getGoodLists(true)
    //调用获取数据接口，并且传入一个true，让axios方法指导是否需要拼接数组。
   }, 500)
  }
getGoodLists (flag) {
   var param = {
    page: this.page,
    pageSize: this.pageSize,
    sort: this.sortFlag ? 1 : -1
   }
   axios.get('/goods', {params: param}).then((response) => {
    let res = response.data
    if (flag) {
     this.goodList = this.goodList.concat(res.result.list)
     //如果是flagtrue，则拼接数组。
     if (res.result.count === 0) {
      this.busy = true
     } else {
      this.busy = false
     }
    } else {
     this.goodList = res.result.list
     this.busy = false
     第一次进来的时候，把busy置位false。执行loadMore的方法
    }
   })
  },

总结

以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue中的无限加载vue-infinite-loading的方法

    本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';

  • vue-infinite-loading2.0 中文文档详解

    简介 这是一个使用在Vue.js中的无限滚动插件,它可以帮助你快速创建一个无限滚动列表. 特点 移动端支持友好 兼容任何一个可以滚动的元素 有不同的旋转器可以作为加载动画 支持加载后显示结果 支持两个方向的无限加载 <p id="installation">安装</p> <strong>注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading

  • AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di

  • vue和iview实现Scroll 数据无限滚动功能

    在做项目的时候因为数据比较多,一次性全部渲染的话会花费较多的时间,所以,想到每一次渲染10条数据 也想过每一次获取十条数据然后显示就行了,就目前自己所知最好的方法是修改接口,一次返回10条,可是这样子太麻烦了,所以决定一次性请求所有数据,然后每次渲染十条,需要再上拉加载更多 使用的是iview中的组件Scroll 以下是获取数据和封装数据的方法: 原理是先定义两个全局的变量,一个存储全部的数据,一个存储渲染的数据 在首次获得数据的时候,往渲染的变量中存入全部数据的前十条: 然后在数据最底时上拉加

  • 使用vue-infinite-scroll实现无限滚动效果

    vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法. https://github.com/ElemeFE/vue-infinite-scroll/ https://www.npmjs.com/package/vue-infinite-scroll npm i vue-infinite-scroll --save main.js使用 import vueiInfinite from 'vue-infinite-scroll

  • 使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    使用Swift实现iOScollectionView广告无限滚动效果(DEMO)

    今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: 1. 在你需要放置无限滚动展示数据的地方把他的数据,在原本的基础上把你要展示的数据扩大三倍.(当然扩大两倍也是可以的,三倍的话,比较好演示) // MARK: - 设置数据源 func collectionView(_ collectionView: UICollectionView, number

  • vue.js-div滚动条隐藏但有滚动效果的实现方法

    组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐

  • vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • vue实现公告栏文字上下滚动效果的示例代码

    本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下: 代码实现: 在项目结构的components中新建text-scroll.vue文件 <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text

  • vue实现消息向上无缝滚动效果

    vue实现消息向上无缝滚动效果

    本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下 代码: <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">   <li v-for="item in noticeList">     ...   </li> <

  • iOS利用UIScrollView实现无限滚动效果

    iOS利用UIScrollView实现无限滚动效果

    前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤 1.根据需求准备几张图片,在网上找了5张图片,分别命名为 img

  • UGUI实现ScrollView无限滚动效果

    UGUI实现ScrollView无限滚动效果

    抽空做了一个UGUI的无限滚动的效果.只做了一半(向下无限滚动).网上也看了很多教程,感觉还是按照自己的思路来写可能比较好.搭建如下: content节点不添加任何组件.布局组件默认是会重新排版子节点的,所以如果子节点的位置变化,会重新排版,不能达到效果.Size Fitter组件也不加,自己写代码调整Size大小(不调整大小,无法滑动). 最主要的实现过程就是用Queue来搬运Cell.在向下滚动的过程中(鼠标上滑),顶部滑出View Port的Cell被搬运到底部续上.这点类似于Queue的

  • vue实现左右点击滚动效果

    vue实现左右点击滚动效果

    本文实例为大家分享了vue实现左右点击滚动,效果如图 涉及功能点 1.在created中使用r e f s 结 合 refs结合refs结合nextTick仍然无法获取到元素的问题:添加定时器 2.左右按钮是否可点击根据数据以及当前分辨率可放下的个数确认 3.可适应不同分辨率下的情况 代码 <!--  --> <template>   <div>     <div class="ProgressBoxTool" v-if="progr

随机推荐