原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：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，反之不阻止；
| 选项 | 描述 |
|---|---|
| infinite-scroll-disabled | 如果该属性的值为true，则将禁用无限滚动。 |
| infinite-scroll-distance | 数字(默认值= 0)——在执行v -infinite- scroll方法之前，元素底部和viewport底部之间的最小距离。 |
| infinite-scroll-immediate-check | 布尔值(默认值= true)表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。 |
| infinite-scroll-listen-for-event | 当事件在Vue实例中发出时，无限滚动将再次检查。 |
| infinite-scroll-throttle-delay | 下次检查和这次检查之间的间隔(默认值= 200) |
最后，我们写个函数验证一下：
methods:{
loadMore(){
alert('触发loadMore，请求下一页的信息');
}
}
