当前位置：首页 > VUE

vue 实现滚动加载

2026-02-17 12:03:33VUE

Vue 实现滚动加载的方法

监听滚动事件

在Vue组件中，可以通过@scroll事件监听滚动行为。通常在mounted生命周期钩子中添加事件监听器，并在beforeDestroy中移除以避免内存泄漏。

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    // 滚动逻辑处理
  }
}

计算滚动位置

通过比较文档总高度、滚动条位置和可视区域高度，判断是否滚动到底部附近。以下是一个常见的判断逻辑：

handleScroll() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

  if (scrollTop + windowHeight >= scrollHeight - 100) {
    this.loadMore();
  }
}

加载更多数据

当滚动到底部时触发数据加载方法。需要设置加载状态防止重复请求，并在数据加载完成后更新列表。

data() {
  return {
    isLoading: false,
    list: [],
    page: 1
  }
},
methods: {
  async loadMore() {
    if (this.isLoading) return;

    this.isLoading = true;
    try {
      const newData = await fetchData(this.page++);
      this.list = [...this.list, ...newData];
    } finally {
      this.isLoading = false;
    }
  }
}

使用Intersection Observer API

现代浏览器支持Intersection Observer API，性能优于滚动事件监听。可以观察目标元素与视口的交叉状态。

mounted() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadMore();
    }
  });
  observer.observe(this.$refs.observerElement);
}

第三方库实现

对于复杂场景，可以使用现成的Vue插件如vue-infinite-loading简化开发：

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: { InfiniteLoading },
  methods: {
    async infiniteHandler($state) {
      try {
        const newData = await fetchData();
        this.list.push(...newData);
        $state.loaded();
        if (noMoreData) $state.complete();
      } catch (error) {
        $state.error();
      }
    }
  }
}

<infinite-loading @infinite="infiniteHandler"></infinite-loading>

性能优化

对于长列表，建议使用虚拟滚动技术如vue-virtual-scroller减少DOM节点数量，提升渲染性能。

vue 实现滚动加载

import { RecycleScroller } from 'vue-virtual-scroller';

export default {
  components: { RecycleScroller }
}

<RecycleScroller
  class="scroller"
  :items="list"
  :item-size="50"
  key-field="id"
>
  <template v-slot="{ item }">
    <!-- 渲染单个项目 -->
  </template>
</RecycleScroller>