前台-首页数据懒加载等-简历

数据懒加载

// 数据懒加载，滚动到可视区域才加载数据（发起请求）    {局部导入}
// import { useIntersectionObserver } from '@vueuse/core'
import { ref, onBeforeUnmount, onMounted } from 'vue'
// 数据懒加载函数
export const useLazyData = (apiFn: () => any) => {
	// 需要
	// 1. 被观察的对象
	const target = ref<any>()

	// 2. 不同的API函数
	const result = ref<any[]>([])
	let recommendObserve
	const observeHandler = () => {
		recommendObserve = new IntersectionObserver(
			(data) => {
				if (data[0].boundingClientRect.top > 0 && !data[0].isIntersecting) {
					console.log('退出')
				} else {
					console.log('进入')
					apiFn().then((res) => {
						result.value = res.data
					})
					recommendObserve.unobserve(target.value)
				}
			},
			{
				threshold: 0, //进入到可视区交界就开始观察
			}
		)
		recommendObserve.observe(target.value)
	}
	onBeforeUnmount(() => {
		r