使用Vue简单实现一个上拉加载更多分页组件

<template>
    <div class="j-page-content" ref="scrollable" @scroll="handleScroll">
        <slot></slot>
        <div v-if="loading" class="loading-indicator">{{ moreText }}</div>
    </div>
</template>

props: {
    moreText: {
        type: String,
        default: "加载中...",
    },
    threshold: {
        type: String,
        default: "20",
    },
}

data() {
    return {
        loading: false,
        isNearBottom: false,
        scrollableElement: null,
        isloading: false,
    };
}

mounted() {
    this.scrollableElement = this.$refs.scrollable;
}

handleScroll() {
    if (this.isloading) return;
    const scrollTop = this.scrollableElement.scrollTop;
    const clientHeight = this.scrollableElement.clientHeight;
    const scrollHeight = this.scrollableElement.scrollHeight;

    // 判断是否接近底部
    this.isNearBottom =
        scrollTop + clientHeight >= scrollHeight - this.threshold;

    if (this.isNearBottom &&!this.loading) {
        this.loading = true;
        this.isloading = true;
        this.$emit("loadMore");
    }
}

loadMoreComplete() {
    this.loading = false;
    setTimeout(() => {
        this.isloading = false;
    }, 100);
}

<template>
    <div class="content" style="height: 500px">
        <JPageContent @loadMore="loadMoreData" ref="JPageContent">
            <div v-for="n in nums" :key="n">
                <div
                    style="
                        height: 100px;
                        width: 400px;
                        text-align: center;
                        line-height: 100px;
                        border: 1px solid gray;
                    "
                >
                    JPageContent-{{ n }}
                </div>
            </div>
        </JPageContent>
    </div>
</template>
<script>
export default {
    data() {
        return {
            nums: 10,
        }
    },
    methods: {
        loadMoreData() {
            if (this.nums >= 30) {
                this.$refs.JPageContent.loadMoreComplete();
                return;
            }
            setTimeout(() => {
                this.nums += 10;
                this.$refs.JPageContent.loadMoreComplete();
            }, 1000);
        }
    }
}
</script>