思考：平时实现下拉加载都要监听适口，到达什么条件或者==，实现下来巨麻烦（相对于这个）....
IntersectionObserver 接口（从属于 Intersection Observer API）提供了一种异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的方法。其祖先元素或视口被称为根（root）。
当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
兼容性：
下拉加载组件封装实例：
onLoadMore达到触发条件触发的外部函数
<template>
<div ref="loadMoreTrigger" class="load-more-trigger">
<slot></slot>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
const props = defineProps<{
onLoadMore: () => void
}>()
const loadMoreTrigger = ref<HTMLElement | null>(null)
let observer: IntersectionObserver | null = null
const createObserver = () => {
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1,
}
observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
props.onLoadMore()
}
})
}, options)
if (loadMoreTrigger.value) {
observer.observe(loadMoreTrigger.value)
} else {
console.error('loadMoreTrigger element is not found')
}
}
onUnmounted(() => {
if (loadMoreTrigger.value) {
observer?.unobserve(loadMoreTrigger.value)
}
})
onMounted(async () => {
await nextTick()
createObserver()
})
</script>
<style scoped>
.load-more-trigger {
text-align: center;
padding: 0.01rem 0;
}
</style>
