看过很多文章,都是通过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>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐