vue3监听滚动条实现滚动条触底加载数据_vue3滚动条到底加载数据

看过很多文章，都是通过document.getElementById获取DOM元素，操作DOM。这样写不好，vue官方文档不推荐直接操作DOM，vue的核心思想是数据驱动视图，即通过数据的变化来更新DOM。如果直接操作DOM，可能导致视图和数据不同步，并且难以维护和排查bug。其次操作DOM是极其损耗性能，代码的质量会降低

最好是通过ref来获取dom容器

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42