看过很多文章，都是通过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.totaldata.value = res.datascrollRef.value.addEventListener('scroll',async () => {const {scrollTop, offsetHeight, scrollHeight } = scrollRef.valueif (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>
