uniapp实现图片懒加载 封装组件

想要的效果就是窗口滑动到哪里，哪里的图片进行展示 主要原理使用IntersectionObserver

<template><view><image @error="HandlerError" :style="imgStyle" :src="imageSrc" :id="randomId" :mode="mode" class="music-img" /></view>
</template>
<script setup lang="ts">
import { uuid } from '@/utils/index'const instance = getCurrentInstance()
let observer2: any = null
const randomId = ref<string>('')
randomId.value = uuid()
type Props = {src: stringloadingSrc: stringimgStyle: anymode: stringclassName: string
}
const props = defineProps<Props>()
let src = computed(() => {return props.src || ''
})
let loadingSrc = computed(() => {return props.loadingSrc || ''
})
let imgStyle = computed(() => {return props.imgStyle || { width: '200rpx' }
})
let mode = computed(() => {return props.mode || ''
})let imageSrc = ref<string>('')imageSrc.value = loadingSrc.valueconst HandlerError = () => {}
onMounted(() => {if (imageSrc.value == loadingSrc.value) {// #ifdef APP || H5const observer = new IntersectionObserver((entries) => {if (entries[0].intersectionRatio > 0) { //进入页面的占比>0 就认为要显示const img = entries[0].targetimageSrc.value = src.valueobserver.unobserve(img)}},{root: null,rootMargin: '0px',threshold: 0.1})const img: Element | null = document.getElementById(`${randomId.value}`)if (img) {observer.observe(img)}// #endif// #ifndef APP || H5observer2 = uni.createIntersectionObserver(instance).relativeToViewport()observer2.observe('.music-img', (res) => {if (res.intersectionRatio > 0) {imageSrc.value = src.value}})// #endif}
})
onUnmounted(() => {// #ifndef APP || H5if (observer2) {observer2.disconnect()}// #endif
})
</script><style></style>