網頁通常需要展示大量數據，但是為了避免讓頁面過于沉重加載過程太慢，我們通常采取分頁的方式展示數據，每次只顯示部分內容，然后通過點擊“下一頁”或者“加載更多”按鈕，觸發請求新的數據并替換當前展示的內容。

在Vue框架中，我們可以通過構造組件來實現這個功能,本文將向您介紹一種簡便的load more組件的實現方式。

// load-more.vue
<template>
<div>
<slot name="content"></slot>
<button v-if="showButton" @click="loadMore">{{buttonText}}</button>
</div>
</template>
<script>
export default {
name: "LoadMore",
props: {
threshold: { // 觸發加載閾值
type: Number,
default: 50
},
buttonClass: { // 按鈕樣式
type: String,
default: "load-more"
},
buttonText: { // 按鈕文本
type: String,
default: "Load More"
}
},
data() {
return {
showButton: true
};
},
methods: {
loadMore() {
this.$emit("loadMore");
},
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const offsetTop = this.$el.offsetTop;
const offsetHeight = this.$el.offsetHeight;
const windowHeight = window.innerHeight;
if (scrollTop + windowHeight >= offsetTop + offsetHeight - this.threshold) {
this.showButton = true;
} else {
this.showButton = false;
}
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll, { passive: true });
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
}
};
</script>

通過在組件中設置一個閾值（threshold），我們可以控制頁面滾動到底部多少距離時觸發新數據的請求。同時，我們還要注意當數據完全加載時需要把“加載更多”按鈕隱藏起來，以免重復請求數據。在這個實現中，我們還用到了slot插槽的方式來引入需要展示的數據內容。在使用時，只需要在子組件中添加load-more標簽，并將需要展示的數據包裹在slot標簽中即可。