当前位置：首页 > VUE

vue实现页面滚动查询

2026-01-22 15:46:35VUE

监听滚动事件实现查询

在Vue中，可以通过监听页面滚动事件来触发查询操作。使用window.addEventListener绑定scroll事件，结合防抖函数优化性能。

export default {
  data() {
    return {
      isLoading: false,
      page: 1,
      totalPages: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll: _.debounce(function() {
      const scrollPosition = window.innerHeight + window.scrollY
      const pageHeight = document.body.offsetHeight - 100

      if (scrollPosition >= pageHeight && !this.isLoading && this.page < this.totalPages) {
        this.loadMoreData()
      }
    }, 200),

    loadMoreData() {
      this.isLoading = true
      this.page++
      // 调用API获取数据
      fetchData(this.page).then(res => {
        this.totalPages = res.totalPages
        this.isLoading = false
      })
    }
  }
}

使用Intersection Observer API

现代浏览器支持的Intersection Observer API提供更高效的滚动检测方式，性能优于传统滚动事件监听。

vue实现页面滚动查询

export default {
  data() {
    return {
      observer: null
    }
  },
  mounted() {
    this.observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        this.loadMoreData()
      }
    }, {
      threshold: 1.0
    })

    this.observer.observe(document.querySelector('#load-more-trigger'))
  },
  beforeDestroy() {
    this.observer.disconnect()
  },
  methods: {
    loadMoreData() {
      // 数据加载逻辑
    }
  }
}

结合Vue自定义指令

创建自定义指令可以封装滚动查询逻辑，使组件代码更简洁。

Vue.directive('scroll-load', {
  inserted(el, binding) {
    const callback = binding.value

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        callback()
      }
    }, {
      threshold: 0.1
    })

    observer.observe(el)
  }
})

无限滚动组件封装

将滚动查询功能封装为可复用组件，提供插槽和回调接口。

vue实现页面滚动查询

<template>
  <div class="infinite-scroll">
    <slot></slot>
    <div 
      v-if="hasMore" 
      v-observe="loadMore" 
      class="observer-element"
    ></div>
    <div v-if="loading" class="loading-indicator">加载中...</div>
  </div>
</template>

<script>
export default {
  props: {
    loadMore: {
      type: Function,
      required: true
    },
    hasMore: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

滚动位置恢复

在SPA应用中，返回页面时恢复滚动位置需要结合Vue Router导航守卫和keep-alive。

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

const router = new VueRouter({
  routes,
  scrollBehavior
})