当前位置：首页 > VUE

vue滚动实现翻页

2026-03-29 05:34:16VUE

实现 Vue 滚动翻页的方法

监听滚动事件

在 Vue 组件中，可以通过 @scroll 事件监听滚动行为。需要确保目标元素设置了 overflow-y: auto 或 overflow-y: scroll。

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

<script>
export default {
  methods: {
    handleScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target
      const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 50
      if (isNearBottom) {
        this.loadMore()
      }
    },
    loadMore() {
      // 加载更多数据的逻辑
    }
  }
}
</script>

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

使用 Intersection Observer API

这种方法更现代且性能更好，特别适合无限滚动场景。

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

<script>
export default {
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMore()
      }
    })
    observer.observe(this.$refs.sentinel)
  },
  methods: {
    loadMore() {
      // 加载更多数据
    }
  }
}
</script>

<style>
.sentinel {
  height: 1px;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用专门为 Vue 设计的滚动库：

vue-infinite-loading：提供完整的无限滚动解决方案
vue-virtual-scroller：适合大量数据列表的虚拟滚动

安装示例：

npm install vue-infinite-loading

使用示例：

<template>
  <div>
    <!-- 内容 -->
    <infinite-loading @infinite="loadMore"></infinite-loading>
  </div>
</template>

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

export default {
  components: { InfiniteLoading },
  methods: {
    loadMore($state) {
      // 异步加载数据
      fetchData().then(newItems => {
        if (newItems.length) {
          this.items.push(...newItems)
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>