v-infinite-scroll懒惰加载

安装

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
        }
    }
})

选项	描述
infinite-scroll-disabled	等于true时代表正在执行加载，这时禁用滚动触发。
infinite-scroll-distance	指定滚动条距离底部多高时触发v-infinite-scroll指向的方法。
infinite-scroll-immediate-check	布尔值(默认值= true)。指令在绑定后立即检查，是否内容高度不足以填充页面容器。
infinite-scroll-listen-for-event	当vue实例触发事件时立即再次检查。
infinite-scroll-throttle-delay	两次检查之间的时间间隔(默认值= 200)。