当前位置：首页 > VUE

vue如何实现无限滚动

2026-02-21 10:24:00VUE

Vue 无限滚动的实现方法

无限滚动（Infinite Scroll）是一种常见的前端交互方式，当用户滚动到页面底部时自动加载更多数据。以下是几种在 Vue 中实现无限滚动的方法：

使用原生事件监听

通过监听滚动事件，计算滚动位置触发加载。

vue如何实现无限滚动

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      isLoading: false
    };
  },
  methods: {
    handleScroll(e) {
      const container = e.target;
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
      if (scrollBottom < 50 && !this.isLoading) {
        this.loadMore();
      }
    },
    loadMore() {
      this.isLoading = true;
      // 模拟异步加载
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: this.items.length + i,
          content: `Item ${this.items.length + i}`
        }));
        this.items = [...this.items, ...newItems];
        this.isLoading = false;
      }, 1000);
    }
  },
  mounted() {
    // 初始化数据
    this.loadMore();
  }
};
</script>

<style>
.scroll-container {
  height: 400px;
  overflow-y: auto;
}
</style>

使用 Intersection Observer API

更现代的浏览器 API，性能优于滚动事件监听。

vue如何实现无限滚动

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div ref="loader" class="loader"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      observer: null
    };
  },
  methods: {
    loadMore() {
      const newItems = Array(10).fill().map((_, i) => ({
        id: this.items.length + i,
        content: `Item ${this.items.length + i}`
      }));
      this.items = [...this.items, ...newItems];
    }
  },
  mounted() {
    this.loadMore();

    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore();
      }
    });

    this.observer.observe(this.$refs.loader);
  },
  beforeDestroy() {
    this.observer.disconnect();
  }
};
</script>

使用第三方库

可以简化实现的流行库包括：

vue-infinite-loading
vue-infinite-scroll

以 vue-infinite-loading 为例：

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

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

export default {
  components: { InfiniteLoading },
  data() {
    return {
      items: []
    };
  },
  methods: {
    loadMore($state) {
      setTimeout(() => {
        const newItems = Array(10).fill().map((_, i) => ({
          id: this.items.length + i,
          content: `Item ${this.items.length + i}`
        }));
        this.items = [...this.items, ...newItems];
        $state.loaded();

        // 模拟数据加载完毕
        if (this.items.length >= 50) {
          $state.complete();
        }
      }, 1000);
    }
  }
};
</script>