Реализовать загрузку данных при прокрутке vue3 useIntersectionObserver

причина:

Предположим, что на странице много картинок, если загрузить их все сразу, то интерфейс будет возвращаться медленно, что заблокирует отрисовку страницы, пользователю может потребоваться несколько секунд или даже больше, чтобы увидеть содержимое, которое невыносимо

В vue вы можете использовать useIntersectionObserver для ленивой загрузки данных.

@vueuse/core предоставляет метод useIntersectionObserver

Ссылка на VueUse:  useIntersectionObserver | VueUse

<template>
	<!-- 首页 -->
	<div class="mt-4">
		<SwiperBanner :swiperList="swiperList" isNavigation isShadow slideShadows :loading="swiperLoading"/>

		<div class="flex items-center py-4 titleColor">推荐</div>
		<div class="row pl-2" v-loading="listLoading" ref="loadingTarget">
			<GoodsItem v-for="(item, index) in list" :key="item.goods_id" :item="item" :index="index"/>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core"

//ref引用，获取DOM
const loadingTarget = ref(null)

const listLoading = ref(false)
const list = ref([]);
const getNewGoods = async () => {
	listLoading.value = true
	const res = await newGoods();
	list.value = res;
	listLoading.value = false
};

//使用 该方法 滚动时 实现 数据懒加载
useIntersectionObserver(loadingTarget, ([{ isIntersecting }]) => {
	if(isIntersecting) {
		if(list.value.length == 0) {
			getNewGoods();
		}
	}
})

</script>