1.下载 @vueuse/core
npm i @vueuse/core
@vueuse/core官方网址
https://vueuse.org/core/useintersectionobserver/
2.使用
<div class="recommend-course-content" ref="target">
<CourseItem :columns="columns" :newCourseList="newCourseList" v-if='targetIsVisible'></CourseItem>
</div>
const CourseItem = defineAsyncComponent(() =>
import('@/components/home/CourseItem.vue')
)
// 异步组件
import { useIntersectionObserver } from '@vueuse/core'
const newCourseList=ref([])
const target = ref(null);
const targetIsVisible = ref(false);
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }]) => {
console.log(isIntersecting,'isIntersecting');
if( isIntersecting ) {
targetIsVisible.value = isIntersecting
}
},
)