练习通过elementUi实现图片懒加载以及下拉底部滚动条加载图片

npm install element-ui --save

<template>
  <div>
    <!-- 图片懒加载 -->
    <el-image
      v-for="(image, index) in images"
      :key="index"
      :src="image.src"
      fit="cover"
      lazy
    ></el-image>

    <!-- 滚动条加载更多 -->
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
    >
      <i v-if="loading" class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [], // 图片数组
      loading: false, // 是否正在加载
      busy: false, // 是否可以继续加载
    };
  },
  methods: {
    // 初始化图片列表
    initImages() {
      // 这里模拟加载图片，实际应用中应该从服务器获取
      for (let i = 0; i < 20; i++) {
        this.images.push({
          src: `https://picsum.photos/id/${i}/1024/768`,
        });
      }
    },
    // 滚动条触发的加载更多
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        for (let i = this.images.length; i < this.images.length + 20; i++) {
          this.images.push({
            src: `https://picsum.photos/id/${i}/1024/768`,
          });
        }
        this.loading = false;
      }, 1000); // 模拟异步加载延迟
    },
  },
  created() {
    this.initImages();
  },
};
</script>