1. 安装

npm install vue-infinite-scroll --save

2. main.js中配置并使用

import infiniteScroll from 'vue-infinite-scroll';
Vue.use(infiniteScroll)

3. 用法

1.放在底部

<div v-infinite-scroll ="loadMore" infinite-scroll-disabled ="busy" infinite-scroll-distance="5">
    <img src="static/img/loading.gif" alt="">
</div>

2.方法

var count = 0;
 
新的Vue({
  el:'#app',
  数据:{
    数据:[],
    忙:假
  },
  方法: {
    loadMore:function(){
      this.busy = true;
 
      setTimeout(()=> {
        for(var i = 0,j = 10; i <j; i ++){
          this.data.push({name:count ++});
        }
        this.busy = false;
      },1000);
    }
  }
})

    

4.可参考网址

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

Logo

前往低代码交流专区

更多推荐