Vue3监听滚动条触底加载更多

原因：我们在实现列表或者数据的时候一般使用element-plus中的组件，table表格带有翻页组件但是现在我们的的需求满足不了，不再使用翻页需要使用下滑加载更多这时候就需要更改使用屏幕监听配合瀑布流组件实现

<template>
	//滚动元素
	<div ref="scrollRef">
		<div>滚动内容</div>
		<div>滚动内容</div>
		<div>滚动内容</div>
		<div>滚动内容</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { getData } from '/@/api/index'
	
	const scrollRef = ref()//名字需要跟上面模板中定义的一样
	const currentPage = ref(1)//当前页数
	const pageSize = ref(10)//分页大小
	const total = ref(0)//数据总量
	const data = ref()//接口获取的数据
		
	onMounted(async () => {
	    let res = await getData(currentPage.value, pageSize.value)//调接口获取数据
	    //实际操作根据自己的接口来
	    total.value = res.total
	    data.value = res.data
	    
		scrollRef.value.addEventListener('scroll',async () => {
			const { scrollTop, offsetHeight, scrollHeight } = scrollRef.value
			if (scrollTop + offsetHeight >= scrollHeight) {
	          //滚动条到达底部
	          if (data.value.length < total.value) {
	          	//数据为加载完，继续赋值
	            currentPage.value++
	            let res = await getData(currentPage.value, pageSize.value)
	            res.data.forEach((element) => {
	            	data.push(element)
	            })
	          }
        	}
		})
	})
</script>