当前位置：首页 > VUE

vue 实现加载更多

2026-03-10 07:45:42VUE

Vue 实现加载更多功能

使用滚动事件监听

在 Vue 中实现加载更多功能可以通过监听滚动事件来实现。创建一个方法检查是否滚动到页面底部，触发加载更多数据。

<template>
  <div @scroll="handleScroll" style="overflow-y: auto; height: 500px;">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1
    };
  },
  methods: {
    handleScroll(event) {
      const { scrollTop, clientHeight, scrollHeight } = event.target;
      if (scrollHeight - scrollTop <= clientHeight + 50 && !this.loading) {
        this.loadMore();
      }
    },
    async loadMore() {
      this.loading = true;
      const newItems = await fetchMoreData(this.page);
      this.items = [...this.items, ...newItems];
      this.page++;
      this.loading = false;
    }
  },
  mounted() {
    this.loadMore();
  }
};
</script>

使用 Intersection Observer API

Intersection Observer API 提供了一种更高效的方式检测元素是否进入视口，适合实现懒加载或无限滚动。

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" v-if="!loading && hasMore">Load More</div>
    <div v-if="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      hasMore: true
    };
  },
  methods: {
    async loadMore() {
      if (this.loading || !this.hasMore) return;
      this.loading = true;
      const newItems = await fetchMoreData(this.page);
      if (newItems.length === 0) {
        this.hasMore = false;
      } else {
        this.items = [...this.items, ...newItems];
        this.page++;
      }
      this.loading = false;
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore();
      }
    });
    observer.observe(this.$refs.loader);
  }
};
</script>

使用第三方库

如果需要更复杂的功能，可以使用第三方库如 vue-infinite-loading 或 vue-virtual-scroller 简化实现。

安装 vue-infinite-loading：

npm install vue-infinite-loading

使用示例：

vue 实现加载更多

<template>
  <div>
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <infinite-loading @infinite="loadMore" spinner="spiral"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading },
  data() {
    return {
      items: [],
      page: 1
    };
  },
  methods: {
    async loadMore($state) {
      const newItems = await fetchMoreData(this.page);
      if (newItems.length) {
        this.items = [...this.items, ...newItems];
        this.page++;
        $state.loaded();
      } else {
        $state.complete();
      }
    }
  },
  mounted() {
    this.loadMore();
  }
};
</script>