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

使用Element UI实现图片懒加载和滚动加载，可以结合el-image组件和infinite-scroll组件。以下是一个简单的示例：

1. 安装Element UI:

npm install element-ui --save

2. 在Vue组件中使用:

<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>

在这个例子中，el-image组件使用lazy属性实现懒加载，infinite-scroll指令用于实现滚动条触底部时加载更多图片。v-for用于渲染图片列表，:src绑定图片地址。

请确保Element UI已正确安装并在Vue项目中引入。在实际应用中，你需要替换图片地址，并实现从服务器获取更多图片的逻辑。