当前位置：首页 > VUE

vue滚动实现换页

2026-01-16 18:58:23VUE

Vue 滚动实现换页方法

监听滚动事件

在 Vue 中通过 @scroll 或 @wheel 事件监听滚动行为。需在容器元素上添加事件监听，并计算滚动位置触发换页逻辑。

<template>
  <div class="scroll-container" @scroll="handleScroll">
    <!-- 内容区域 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(e) {
      const container = e.target;
      const scrollHeight = container.scrollHeight;
      const scrollTop = container.scrollTop;
      const clientHeight = container.clientHeight;

      // 触底判断（距离底部小于阈值时换页）
      if (scrollHeight - scrollTop - clientHeight < 50) {
        this.loadNextPage();
      }
    },
    loadNextPage() {
      // 加载下一页数据的逻辑
    }
  }
}
</script>

使用 IntersectionObserver API

通过现代浏览器支持的 IntersectionObserver 实现懒加载或分页，性能更优。监听底部元素是否进入视口。

<template>
  <div class="scroll-container">
    <!-- 内容区域 -->
    <div ref="sentinel"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadNextPage();
      }
    }, { threshold: 0.1 });
    observer.observe(this.$refs.sentinel);
  },
  methods: {
    loadNextPage() {
      // 加载下一页逻辑
    }
  }
}
</script>

第三方库支持

使用 vue-infinite-scroll 等插件快速实现分页滚动。需先安装依赖：

npm install vue-infinite-scroll

集成示例：

<template>
  <div v-infinite-scroll="loadNextPage" infinite-scroll-distance="50">
    <!-- 内容区域 -->
  </div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll';
export default {
  directives: { infiniteScroll },
  methods: {
    loadNextPage() {
      // 加载下一页逻辑
    }
  }
}
</script>