当前位置：首页 > VUE

vue 实现滚动加载

2026-01-16 19:27:19VUE

Vue 实现滚动加载的方法

滚动加载（Infinite Scroll）是常见的前端功能，通过监听滚动事件动态加载数据。以下是Vue中实现滚动加载的几种方案：

使用原生滚动事件监听

通过监听窗口或容器的滚动事件，计算滚动位置触发加载。

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      hasMore: true
    };
  },
  methods: {
    async loadData() {
      if (!this.hasMore || this.loading) return;
      this.loading = true;
      const newData = await fetchData(this.page); // 替换为实际API调用
      if (newData.length) {
        this.list = [...this.list, ...newData];
        this.page++;
      } else {
        this.hasMore = false;
      }
      this.loading = false;
    },
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      if (scrollHeight - (scrollTop + clientHeight) < 50) {
        this.loadData();
      }
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

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

使用 Intersection Observer API

现代浏览器支持的更高效方法，避免频繁触发滚动事件。

<template>
  <div class="container">
    <div v-for="item in list" :key="item.id">{{ item.content }}</div>
    <div ref="loader" v-if="hasMore">加载更多...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      hasMore: true,
      observer: null
    };
  },
  methods: {
    async loadData() {
      const newData = await fetchData(this.page);
      if (newData.length) {
        this.list = [...this.list, ...newData];
        this.page++;
      } else {
        this.hasMore = false;
      }
    }
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadData();
      }
    });
    this.$nextTick(() => {
      this.observer.observe(this.$refs.loader);
    });
  },
  beforeDestroy() {
    this.observer.disconnect();
  }
};
</script>

使用第三方库（如 vue-infinite-loading）

对于快速集成，可以使用现成组件。

安装：

npm install vue-infinite-loading

使用示例：

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

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

export default {
  components: { InfiniteLoading },
  data() {
    return {
      list: [],
      page: 1
    };
  },
  methods: {
    async loadData($state) {
      try {
        const newData = await fetchData(this.page);
        if (newData.length) {
          this.list = [...this.list, ...newData];
          this.page++;
          $state.loaded();
        } else {
          $state.complete();
        }
      } catch (err) {
        $state.error();
      }
    }
  }
};
</script>