Vue3实现网页区域滚动到底部刷新

场景：使用一个区域展示列表数据，但是数据太多，全部拉下来费时间，所以先拉一部分数据，滚动到最底部再刷新一部分新数据，可以提高性能，类似分页

1. 首先js中创建GetModelGroupScrollContainer，GetModelGroupHandleScroll

<script lang="ts" setup>
import { reactive, ref, onMounted, watch, onBeforeUnmount, onUnmounted } from "vue";

// 获取模型组的总页数，可以在请求时根据每页大小计算出总页数，或者后端直接返回
const ModelGroupTotal = ref()

// 模型组当前加载到的页码
const nowModelGroupPage = ref(1)

// 模型组滚动容器
const GetModelGroupScrollContainer = ref(null);

// 模型组滚动监测方法
const GetModelGroupHandleScroll = () => {
    const container = GetModelGroupScrollContainer.value;
    // 检查是否滚动到底部
    if (container) {
    //因为我这里有边框会影响触底所以-2
        const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight-2;
        if (isAtBottom) {
            // 执行当滚动到底部时的操作
            console.log('滚动到底部了！');
            if (nowModelGroupPage.value !== ModelGroupTotal.value) {
                nowModelGroupPage.value+=1
                GetModelGroup(nowModelGroupPage.value,25)
            } else {
                // ElMessage({
                //     type: 'warning',
                //     message: '已经到最底部了'
                // })
            }
        }
    }
}

// 加载页面完成运行
onMounted(() => {
//获取模型组列表
    GetModelGroup(nowModelGroupPage.value,25)
});

// 为了性能考虑，组件卸载时移除事件监听
onUnmounted(() => {
    let container = GetModelGroupScrollContainer.value;
    if (container) {
        container.removeEventListener('scroll', GetModelGroupHandleScroll);
    }
});
</script>

2. 然后找准div区域将上面两个绑定上去‘@scroll’可以监测滚动条滚动动作

<div v-loading="GetModelGroupLoading" class="leftAreaModelGroupList"
 ref="GetModelGroupScrollContainer" @scroll="GetModelGroupHandleScroll">
 <!-- 以下是我复制的我的源码可以更改成你们的 -->
                <h3 style="margin-bottom: 10px;">模型组列表：</h3>
                <div class="ModelGroupDataList" v-for="(item, index) in ModelGroupData" :key="index" :data="JSON.stringify(item)"  @click="ModelGroupClick($event)">{{ item.id + '.' + item.name }}</div>
 </div>

3. 以下是一个区域触底的简单示例可以参考，可以配合elementplus的el-backtop组件一起使用

<template>
	<div ref="scrollContainer" class="scroll-container" @scroll="handleScroll">
		<!-- 你的内容 -->
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<h1>99999</h1>
		<el-backtop target=".scroll-container" :right="100" :bottom="100" />
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const scrollContainer = ref(null);

const handleScroll = () => {
	const container = scrollContainer.value;
	// 检查是否滚动到底部
	if (container) {
		const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight;
		if (isAtBottom) {
			// 执行当滚动到底部时的操作
			console.log('滚动到底部了！');
		}
	}
}

// 如果你需要在组件挂载后自动滚动到底部
onMounted(() => {
	const container = scrollContainer.value;
	// if (container) {
	//   container.scrollTop = container.scrollHeight;
	// }
});

// 为了性能考虑，组件卸载时移除事件监听
onUnmounted(() => {
	const container = scrollContainer.value;
	if (container) {
		container.removeEventListener('scroll', handleScroll);
	}
});
</script>

<style>
.scroll-container {
	width: 100%;
	background-color: antiquewhite;
	max-height: 50%;
	/* 例如，你可以设置一个最大高度 */
	overflow-y: auto;
	/* 启用滚动 */
}
</style>