当前位置：首页 > VUE

vue实现滚动加载页面

2026-02-23 22:04:18VUE

滚动加载的实现原理

滚动加载的核心是通过监听滚动事件，判断用户是否滚动到页面底部附近。当满足条件时触发数据加载，通常结合scrollTop、clientHeight和scrollHeight等属性计算。

监听滚动事件

在Vue组件中，可以通过@scroll指令或addEventListener监听滚动事件。推荐在mounted生命周期钩子中添加监听，并在beforeDestroy中移除以避免内存泄漏。

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

判断滚动到底部

通过比较文档总高度、可视区域高度和滚动距离来判断是否到达底部。常用公式为：

scrollTop + clientHeight >= scrollHeight - threshold

其中threshold是预定义的阈值（如100px），避免精确匹配导致的频繁触发。

handleScroll() {
  const scrollPosition = window.innerHeight + window.scrollY
  const pageHeight = document.documentElement.scrollHeight
  if (scrollPosition >= pageHeight - 100 && !this.loading) {
    this.loadMoreData()
  }
}

数据加载与防抖处理

实际加载数据时需要设置加载状态锁防止重复请求，并建议添加防抖函数优化性能：

methods: {
  loadMoreData: _.debounce(function() {
    if (this.isLoading || this.noMoreData) return
    this.isLoading = true
    fetchData().then(res => {
      this.list = [...this.list, ...res.data]
      this.isLoading = false
    })
  }, 300)
}

使用IntersectionObserver API

现代浏览器支持更高效的IntersectionObserverAPI，可以替代传统滚动事件监听：

mounted() {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) {
      this.loadMoreData()
    }
  })
  observer.observe(this.$refs.observerTarget)
}

第三方库推荐

对于复杂场景，可以考虑以下Vue专用库：

vue-infinite-loading
vue-scroller
v-infinite-scroll（Element UI内置指令）

以vue-infinite-loading为例的基本用法：

vue实现滚动加载页面

<template>
  <div>
    <div v-for="item in list">{{item}}</div>
    <infinite-loading @infinite="loadMore"/>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  components: { InfiniteLoading },
  methods: {
    loadMore($state) {
      fetchData().then(res => {
        this.list.push(...res.data)
        $state.loaded()
        if (noMoreData) $state.complete()
      })
    }
  }
}
</script>