uni-app 可在App端使用的图片懒加载组件

在uni-app中实现图片懒加载组件，可以通过自定义组件并利用Intersection Observer API来检测图片是否进入视口，从而动态加载图片。以下是一个简单的图片懒加载组件的实现示例：

1. 创建懒加载组件

首先，在项目的components目录下创建一个名为LazyLoadImage.vue的组件文件。

<template>
  <view class="lazy-load-container">
    <image
      v-if="isIntersecting"
      :src="src"
      class="lazy-load-image"
      @load="onLoad"
    />
    <view v-else class="placeholder"></view>
  </view>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isIntersecting: false
    };
  },
  mounted() {
    this.observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.isIntersecting = true;
          this.observer.unobserve(this.$el);
        }
      });
    });
    this.observer.observe(this.$el);
  },
  beforeDestroy() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    onLoad() {
      // You can add additional logic when the image loads, if needed
    }
  }
};
</script>

<style scoped>
.lazy-load-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.lazy-load-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* Placeholder background color */
}
</style>

2. 使用懒加载组件

在你的页面中引入并使用这个组件。例如，在pages/index/index.vue中：

<template>
  <view>
    <LazyLoadImage src="https://example.com/image1.jpg" />
    <LazyLoadImage src="https://example.com/image2.jpg" />
    <!-- More images -->
  </view>
</template>

<script>
import LazyLoadImage from '@/components/LazyLoadImage.vue';

export default {
  components: {
    LazyLoadImage
  }
};
</script>

总结

上述代码展示了如何在uni-app中实现一个简单的图片懒加载组件。通过IntersectionObserver API监听图片元素是否进入视口，从而决定是否加载图片。这种方式可以有效地减少页面初始加载时间，提升用户体验。当然，在实际项目中，你可能需要根据具体需求对组件进行进一步的优化和扩展。