[Vue+Element UI] v-infinite-scroll 无限滚动使用总结

<template>
  <div class="infinite-scroll-container">
    <el-button
      v-if="hasMore"
      @click="loadMore"
      :loading="isLoading"
      type="primary"
    >
      点击加载更多
    </el-button>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading" >
      <!-- 数据列表或其他内容 -->
      <div v-for="(item, index) in list" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      isLoading: false, // 是否正在加载
      hasMore: true, // 是否还有更多数据
      page: 1, // 当前页数
      pageSize: 10, // 每页数据量
    };
  },
  methods: {
    async loadMore() {
      if (this.isLoading || !this.hasMore) return;
      this.isLoading = true;
      try {
        const moreData = await this.fetchData(this.page, this.pageSize);
        if (moreData.length < this.pageSize) {
          this.hasMore = false; // 数据已全部加载完毕
        } else {
          this.list = [...this.list, ...moreData];
          this.page += 1;
        }
      } catch (error) {
        console.error('数据加载失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    async fetchData(page, pageSize) {
      // 这里应该是调用API获取数据的函数，具体实现根据实际API而定
      // 模拟API调用
      return new Promise((resolve) => {
        setTimeout(() => {
          const data = Array.from({ length: pageSize }, (_, i) => `Item ${page * pageSize + i}`);
          resolve(data);
        }, 1000);
      });
    },
  },
};
</script>
 
<style>
.infinite-scroll-container {
  height: 400px; /* 设置一个高度以便滚动 */
  overflow-y: auto;
}
</style>

这个示例展示了如何在Vue组件中使用v-infinite-scroll指令实现无限滚动加载数据的功能。组件包含一个按钮，当用户滚动到页面底部时，会触发加载更多数据的操作。数据通过模拟API调用（fetchData函数）获取，并且在加载过程中展示加载状态。当没有更多数据时，按钮会被禁用。这个示例提供了一个简单的无限滚动加载实现，并且可以根据实际需求进行扩展和修改。