vue无限滚动vue-infinite-scroll的配置

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666

安装：

npm i vue-infinite-scroll -D

引用：

main.js中通过如下方式注册全局引用

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

页面中使用：

<div 
v-infinite-scroll="loadMore" 
infinite-scroll-disabled="switchForMore" 
infinite-scroll-distance="10">
  vue-infinite-scroll示例
</div>

说明：

首先：

v-infinite-scroll="loadMore" 中的loadMore事件绑定处理函数，在达到条件(滚动到一定像素)时触发此函数。

infinite-scroll-disabled="switchForMore" 中的switchForMore===true阻止触发loadMore，反之不阻止；

最后，我们写个函数验证一下：

  methods:{
    loadMore(){
      alert('触发loadMore，请求下一页的信息');
    }
  }