uniapp 商品列表 图片懒加载

在uni-app中实现商品列表图片的懒加载，可以通过使用uni-app提供的lazy-load组件来实现。

首先，确保你的商品列表数据中包含了商品的图片链接。

然后，在商品列表的每一个商品项中，使用uni-app的lazy-load组件来展示商品图片。具体步骤如下：

1. 在需要展示商品列表的页面中引入lazy-load组件：

<template>
  <view>
    <view v-for="item in goodsList" :key="item.id">
      <lazy-load :src="item.imgUrl">
        <image class="goods-image" slot="placeholder" src="/static/placeholder.png"></image>
      </lazy-load>
    </view>
  </view>
</template>

<script>
  import lazyLoad from '@/components/lazy-load.vue'

  export default {
    components: {
      lazyLoad,
    },
    data() {
      return {
        goodsList: [
          {
            id: 1,
            imgUrl: 'https://example.com/image1.jpg',
          },
          {
            id: 2,
            imgUrl: 'https://example.com/image2.jpg',
          },
          // 其他商品项...
        ],
      }
    },
  }
</script>

2. 创建lazy-load组件（可以在components目录下新建lazy-load.vue文件），并实现图片懒加载功能：

<template>
  <div class="lazy-load" ref="lazyLoad">
    <slot name="placeholder"></slot>
  </div>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        required: true,
      },
    },
    mounted() {
      this.initObserver()
    },
    methods: {
      initObserver() {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              this.loadImage()
              observer.unobserve(entry.target)
            }
          })
        })
        observer.observe(this.$refs.lazyLoad)
      },
      loadImage() {
        const img = new Image()
        img.src = this.src
        img.onload = () => {
          this.$r