代码提交

components/LazyImage/index.vue

@@ -0,0 +1,89 @@
+<!--
+    @name: LazyImage
+    @author: kahu4
+    @date: 2023-11-16 18:38
+    @description：图片懒加载
+    @update: 2023-11-16 18:38
+-->
+<script setup>
+import { getCurrentInstance, nextTick, onMounted, ref, toRefs } from "vue";
+import { lazyLoading } from "@/utils/images";
+
+/**
+ * @property {string|number} 图片的唯一标识 必填(要求和lazy-${id})
+ */
+const props = defineProps({
+  unique: {
+    type: [String, Number],
+    required: true
+  },
+  src: {
+    type: String,
+    required: true
+  },
+  mode: {
+    type: String
+  }
+})
+const {
+  unique,
+  src,
+  mode
+} = toRefs(props)
+
+const showTruePic = ref(false); // 是否展示真是地址
+
+const _this = getCurrentInstance()
+
+function observerImage() {
+  const intersectionObserver = uni.createIntersectionObserver(_this);
+  intersectionObserver.relativeToViewport()
+  intersectionObserver.observe(`.lazy-${ unique.value }`, (res) => {
+    if (res.intersectionRatio <= 0) return
+    showTruePic.value = true
+  })
+}
+
+onMounted(() => {
+  nextTick(observerImage);
+})
+</script>
+
+<template>
+  <view :class="['lazy-image']">
+    <view :class="[`lazy-${unique}`,'lazy-image__inner']">
+      <image
+          v-if="showTruePic"
+          class="image-context"
+          :src="src"
+          :mode="mode"
+      />
+      <image
+          class="image-context"
+          :src="lazyLoading"
+          v-else
+      />
+    </view>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.lazy-image {
+  // 微信小程序不设置这个会炸裂
+  width: 100%;
+  height: 100%;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+
+    .image-context {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>