当前位置：首页 > VUE

vue实现无限滚轮

2026-02-11 05:12:37VUE

vue实现无限滚轮的方法

无限滚轮（Infinite Scroll）是一种常见的前端交互方式，适用于长列表数据的动态加载。Vue 实现无限滚轮的核心逻辑是监听滚动事件，判断是否滚动到底部附近，触发数据加载。

监听滚动事件

通过 @scroll 事件监听容器滚动行为，计算是否接近底部。适用于固定高度的滚动容器。

<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(event) {
      const container = event.target;
      const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
      if (scrollBottom < 50 && !this.isLoading) {
        this.loadMore();
      }
    },
    loadMore() {
      this.isLoading = true;
      // 模拟异步加载数据
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, 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: 300px;
  overflow-y: auto;
  border: 1px solid #eee;
}
</style>

使用 IntersectionObserver API

现代浏览器支持 IntersectionObserver，性能优于传统滚动事件监听。适合动态观察元素是否进入视口。

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

<script>
export default {
  data() {
    return {
      items: [],
      observer: null
    };
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore();
      }
    });
    this.observer.observe(this.$refs.sentinel);
    this.loadMore();
  },
  methods: {
    loadMore() {
      const newItems = Array.from({ length: 10 }, (_, i) => ({
        id: this.items.length + i,
        content: `Item ${this.items.length + i}`
      }));
      this.items = [...this.items, ...newItems];
    }
  },
  beforeDestroy() {
    this.observer.disconnect();
  }
};
</script>

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

使用第三方库

若项目复杂度高，可选用现成的 Vue 无限滚动库，例如 vue-infinite-loading。

安装依赖：

npm install vue-infinite-loading

示例代码：

vue实现无限滚轮

<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: [],
      page: 1
    };
  },
  methods: {
    async loadMore($state) {
      try {
        const newItems = await fetch(`/api/items?page=${this.page}`).then(res => res.json());
        if (newItems.length) {
          this.items.push(...newItems);
          this.page++;
          $state.loaded();
        } else {
          $state.complete();
        }
      } catch (error) {
        $state.error();
      }
    }
  }
};
</script>