Vue3 écoute la barre de défilement pour réaliser les données de chargement du bas de la barre de défilement

J'ai lu de nombreux articles, qui utilisent tous document.getElementById pour obtenir des éléments DOM et manipuler DOM. Ce n'est pas une bonne façon d'écrire. Le document officiel de vue ne recommande pas de manipuler directement DOM. L'idée centrale de vue est la vue pilotée par les données, c'est-à-dire la mise à jour de DOM par le biais de modifications de données. Si vous manipulez directement le DOM, cela peut entraîner une désynchronisation de la vue et des données, et il est difficile de maintenir et de résoudre les bogues. Deuxièmement, la manipulation du DOM est extrêmement gourmande en performances et la qualité du code sera réduite.

Il est préférable d'obtenir le conteneur dom via ref

<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>