触底加载一个demo,用到的时候根据自己的逻辑使用既可。
<template>
<div class="main">
<div class="top"></div>
<div class="content">
<div class="label"></div>
<div class="list">
<el-scrollbar ref="scroll" class="scrollBox" @scroll="handleScroll">
<p v-for="item in total" :key="item" class="scrollbar-demo-item">
{{ item }}
</p>
</el-scrollbar>
<div v-if="loading" class="loading">Loading...</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const loading = ref(false);
const scroll = ref(null);
const total = ref(20);
const load = () => {
loading.value = true;
setTimeout(() => {
loading.value = false;
total.value += 20;
}, 3000);
};
const handleScroll = (event) => {
if (loading.value === true) {
return;
}
// wrapRef.scrollHeight 内容总高度
// wrapRef.clientHeight 可视区域高度
// event.scrollTop 滚动条距盒子顶部高度
const wrapRef = scroll.value.wrapRef;
let poor = wrapRef.scrollHeight - wrapRef.clientHeight;
// 判断滚动到底部
if (event.scrollTop + 20 >= poor) {
load();
}
};
</script>