当前位置：首页 > VUE

vue中实现滚动加载

2026-01-22 00:49:42VUE

Vue 中实现滚动加载的方法

监听滚动事件

在 Vue 中可以通过 @scroll 事件监听滚动行为，结合 scrollTop、clientHeight 和 scrollHeight 判断是否滚动到底部。

methods: {
  handleScroll() {
    const scrollPosition = window.innerHeight + window.scrollY;
    const pageHeight = document.body.offsetHeight;
    if (scrollPosition >= pageHeight - 200) { // 距离底部200px触发
      this.loadMore();
    }
  }
},
mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
}

使用 Intersection Observer API

现代浏览器推荐使用 Intersection Observer 实现更高效的滚动检测，避免频繁触发滚动事件。

data() {
  return {
    observer: null
  }
},
mounted() {
  this.observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      this.loadMore();
    }
  });
  this.observer.observe(document.querySelector('#load-more-trigger'));
},
beforeDestroy() {
  this.observer.disconnect();
}

第三方库封装

使用现成的 Vue 指令库如 vue-infinite-scroll 快速实现：

安装依赖：

npm install vue-infinite-scroll

使用示例：

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
  <!-- 内容列表 -->
</div>

性能优化注意事项

添加防抖（debounce）避免频繁触发加载
在加载新数据时禁用滚动监听
使用虚拟滚动（virtual scroll）处理超长列表
移动端需考虑 touch 事件兼容性

完整组件示例

<template>
  <div class="scroll-container">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="noMore" class="no-more">没有更多了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false,
      noMore: false
    }
  },
  methods: {
    async loadMore() {
      if (this.loading || this.noMore) return;

      this.loading = true;
      try {
        const newItems = await fetchData(this.page);
        if (newItems.length) {
          this.items.push(...newItems);
          this.page++;
        } else {
          this.noMore = true;
        }
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.loadMore();
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}
</script>

vue中实现滚动加载