VUE用elementUI实现无限滚动组件（InfiniteScroll）

在Vue中使用Element UI实现无限滚动组件，你可以通过监听滚动事件来加载更多数据。以下是一个简单的例子：

1. 安装Element UI:

npm install element-ui --save

2. 在你的Vue组件中引入和使用Element UI的InfiniteScroll组件:

<template>
  <div class="infinite-scroll-container" v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading" infinite-scroll-distance="10">
    <!-- 列表内容 -->
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
 
    <!-- 加载提示 -->
    <p v-if="isLoading">加载中...</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [], // 列表数据
      isLoading: false, // 是否正在加载
      page: 1, // 当前页数
      pageSize: 10, // 每页数量
    };
  },
  methods: {
    loadMore() {
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        for (let i = 0; i < this.pageSize; i++) {
          this.list.push({ id: this.page * this.pageSize + i, content: `Item ${this.page * this.pageSize + i}` });
        }
        this.page += 1;
        this.isLoading = false;
      }, 1000);
    },
  },
  created() {
    this.loadMore(); // 初始化加载数据
  },
};
</script>
 
<style>
.infinite-scroll-container {
  height: 300px;
  overflow-y: auto;
}
</style>

在这个例子中，我们创建了一个名为infinite-scroll-container的容器，并使用了Element UI提供的v-infinite-scroll指令来绑定加载更多数据的方法loadMore。当滚动到距离底部10px时触发加载。isLoading用于控制加载提示的显示。数据加载部分使用了setTimeout模拟异步加载，并在加载完成后更新isLoading状态。