使用技术:Intersection Observer API
Intersection Observer API:这是一种新的浏览器 API,可以用于监听元素进入或离开视口。通过监听元素是否进入视口,我们可以判断何时加载元素。使用 Intersection Observer API 实现 DOM 懒加载非常简单,只需要创建一个观察器对象,并将需要观察的元素传递给它即可。
- <template>
- <div>
- <div class="card px-10 mt-20" v-for="(item, index) in detailList" v-if="detailList.length > 0">
- <div class="flex flex-start gap-5 border-b py-5">
- <div class="w-2 h-10 mt-5 bg-[#FDCC0D]">div>
- <div>{{ item.Question }}div>
- div>
- <v-md-preview :text="item.Answer" left-toolbar="undo redo | emoji" v-if="item.Answer != null && item.Answer != ''" class="mt-10 pb-10" ref="preview">v-md-preview>
- div>
- div>
- template>
-
- const previews:any = ref([])
- onMounted(() => {
- const options = {
- rootMargin: '0px',
- threshold: 0.1,
- }
-
- const observer = new IntersectionObserver((entries, observer) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- const preview = entry.target
- preview.$refs.preview.init()
- observer.unobserve(preview)
- }
- })
- }, options)
-
- previews.value = document.querySelectorAll('.v-md-preview')
- previews.value.forEach((preview:any) => {
- observer.observe(preview)
- })
- })