安装

npm i vue-infinite-scroll -D

vue项目中引用

在main.js入口文件里面引入
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

使用

在滚动条所在元素最后方添加
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  可以为加载中提示语或加载中图片
</div>

例：
<div class="scroll">
    <div class="content">
        ......
    </div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  可以为加载中提示语或加载中图片
    </div>
</div>

export defalut({
    data() {
        return {
            busy: false,
            page: 1
        }
    },
    methods: {
        loadMore() {
            this.buzy = true
            setTimeout(() => {
                请求
            }, 500)
            this.busy = false
        }
    }
})