效果

底部下拉刷新效果.png
无数据效果.png

组件源码

<template>
    <div class="load-more">
        <p class="load-more-placeholder" ref="refLoadMore"></p>
        <!-- 此处封装loading组件 此处我就直接写加载中了... 你们可以用第三方或者自己封装  -->
        <p v-if="!loadEnd" class="load-end-tip">加载中....</p>
        <p v-if="loadEnd" class="load-end-tip">到底了~</p>
    </div>
</template>
<script>
export default {
    name: 'LoadMore',
    props: {
        loadEnd: {
            type: Boolean,
            default: false
        }
    },
    mounted() {
        this.observer();
    },
    methods: {
        observer() {
            this.obs = new IntersectionObserver((entries) => {
                if (entries[0].intersectionRatio > 0) {
                    this.$emit('loadMore');
                }
            });
            this.obs.observe(this.$refs.refLoadMore);
        },
        disconnect() {
            this.obs.disconnect();
        }
    },
    beforeDestroy() {
        this.disconnect();
    }
};
</script>
<style lang="scss" scoped>
.load-more{
    .load-more-placeholder{
        width: 100%;
        height: 1px;
        visibility: hidden;
    }
    .load-end-tip{
        color: #7C8DAF;
        font-size: 12px;
        // text-align: center;
        height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>

项目中使用

    <load-more :loadEnd="loadEnd" @loadMore="load_more" />
    data() {
       return {
            loadEnd: false
        }
    }
   // 加载更多
    load_more() {
        const _this =this
        _this.loadEnd = false
        setTimeout(() => {
            _this.loadEnd = true
        },1000)
    }