使用Vue簡單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件

更新時(shí)間：2024年11月18日 08:24:45 作者：JYeontu

上拉加載更多的分頁功能大家應(yīng)該都見過或者使用過了吧,那么有多少同學(xué)自己實(shí)現(xiàn)過嗎,本文我們來簡單實(shí)現(xiàn)一個(gè)上拉加載更多分頁組件吧

效果展示

體驗(yàn)地址

jyeontu.xyz/jvuewheel/#/JPageContentView

實(shí)現(xiàn)思路

1、組件模板結(jié)構(gòu)

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

可滾動容器：最外層是一個(gè)內(nèi)容容器，并且設(shè)置了 @scroll 事件監(jiān)聽器，當(dāng)用戶滾動這個(gè)容器時(shí)，會觸發(fā) handleScroll 方法。
內(nèi)容插槽：<slot> 元素用于接收外部傳入的內(nèi)容。這意味著使用者可以在使用該組件時(shí)，將需要展示的列表項(xiàng)或者其他內(nèi)容放置在這個(gè)組件內(nèi)部，靈活性很高。
加載提示：當(dāng) loading 為 true 時(shí)，會顯示一個(gè)帶有加載文本的 div。加載文本通過 moreText 屬性傳入，默認(rèn)值為 "加載中..."。這個(gè)加載提示元素位于容器底部。

2、組件屬性（props）

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

moreText：用于定義加載提示文本的內(nèi)容。外部使用者可以根據(jù)自己的應(yīng)用場景和語言需求，自定義這個(gè)文本。
threshold：用于設(shè)置判斷接近容器底部的閾值。默認(rèn)值為 "20"，它表示當(dāng)距離容器底部的距離小于等于這個(gè)閾值時(shí)，觸發(fā)加載更多的操作。這個(gè)值可以根據(jù)實(shí)際的設(shè)計(jì)需求和視覺效果進(jìn)行調(diào)整。

3、組件數(shù)據(jù)（data）

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

loading：用于表示當(dāng)前是否正在加載更多數(shù)據(jù)。初始值為 false，當(dāng)觸發(fā)加載更多操作時(shí)，設(shè)置為 true，加載完成后再重置為 false。
isNearBottom：用于判斷是否接近容器底部。通過在滾動事件處理中計(jì)算得到，初始值為 false。
scrollableElement：用于存儲可滾動容器的引用。在組件掛載（mounted）階段獲取到對帶有 ref="scrollable" 的 div 的引用。
isloading：這是一個(gè)額外的加載狀態(tài)標(biāo)識，用于在加載過程中防止多次觸發(fā)加載更多操作。初始值為 false，在觸發(fā)加載更多操作時(shí)設(shè)置為 true，并在加載完成后的短暫延遲后重置為 false。

4、組件生命周期（mounted）

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

這里通過 this.$refs.scrollable 獲取到在模板中定義的可滾動容器的引用，并將其賦值給 scrollableElement，以便在后續(xù)的滾動事件處理中使用。

5、組件方法（methods）

（1） handleScroll 方法

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

首先，該方法會檢查 isloading 的狀態(tài)，如果正在加載（isloading 為 true），則直接返回，避免多次觸發(fā)加載操作。
然后，獲取可滾動容器的當(dāng)前滾動位置（scrollTop）、可視區(qū)域高度（clientHeight）以及整個(gè)可滾動內(nèi)容的高度（scrollHeight）。通過計(jì)算判斷是否接近底部（scrollTop + clientHeight >= scrollHeight - this.threshold）。
如果接近底部且當(dāng)前沒有在加載（!this.loading），則將 loading 和 isloading 都設(shè)置為 true，并通過 this.$emit("loadMore") 向外拋出一個(gè)名為 loadMore 的自定義事件。父組件可以監(jiān)聽這個(gè)事件來執(zhí)行加載更多數(shù)據(jù)的操作。

（2）loadMoreComplete 方法

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

當(dāng)父組件完成加載更多數(shù)據(jù)的操作后，應(yīng)該調(diào)用這個(gè)方法。它首先將 loading 設(shè)置為 false，表示加載操作已完成。然后，通過 setTimeout 設(shè)置一個(gè) 100 毫秒的延遲后，將 isloading 也設(shè)置為 false。這樣的延遲是為了確保在加載完成后的短暫時(shí)間內(nèi)不會再次觸發(fā)加載更多操作，避免可能出現(xiàn)的問題。

組件使用

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