vue3如何监听页面的滚动

 更新时间:2023年07月03日 10:20:56   作者:至尊绝伦  
这篇文章主要给大家介绍了关于vue3如何监听页面的滚动的相关资料,在vue中实现滚动监听和原生js无太大差异,文中通过图文介绍的非常详细,需要的朋友可以参考下

有的时候监听的是window的滚动,有的时候是监听元素的滚动。 

我们可以先创建一个hook。useScroll.js

import { onMounted,onUnmounted, ref } from 'vue'
import { throttle } from 'underscore'
export default function useScroll(elRef){
  let el = window
  const isReachBottom = ref(false)
  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)
  const scrollListenerHandler = throttle(() => {
    if(el === window){
      clientHeight.value =  document.documentElement.clientHeight
      scrollHeight.value = document.documentElement.scrollHeight
      scrollTop.value = document.documentElement.scrollTop
    }else {
      clientHeight.value = el.clientHeight
      scrollTop.value = el.scrollTop
      scrollHeight.value = el.scrollHeight
    }
    if(clientHeight.value + scrollTop.value >= scrollHeight.value){
      // homeStore.fetchHouselistData()
      isReachBottom.value = true
    }
  }, 100)
  onMounted(()=> {
    if(elRef) {
      el = elRef.value
    }
    el.addEventListener("scroll", scrollListenerHandler)
  })
  onUnmounted(()=>{
    el.removeEventListener("scroll", scrollListenerHandler)
  })
  return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}

 可以传入元素实例参数elRef,如果没有传入的话就初始化为window。

在挂载完成之后判断是否传入了元素实例elRef,如果有的话就使用元素实例,监听元素的滚动。

还需修改window还是元素滚动的判定。 

下面是使用这个hook的方法。 

使用ref取到需要滚动的元素实例。将取到的元素实例传入到useScroll中。

使用useScroll这个hook,取出scrollTop的值进行判断。

总结

到此这篇关于vue3如何监听页面的滚动的文章就介绍到这了,更多相关vue3监听页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 2.5 Level E 发布了: 新功能特性一览

    Vue 2.5 Level E 发布了: 新功能特性一览

    很高兴Vue 2.5 Level E 发布了。在这篇文章中,我们将重点介绍一些更重要的的变化:更好的 TypeScript 集成,更好的错误处理,更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染
    2017-10-10
  • Vue3实现通过axios来读取本地json文件

    Vue3实现通过axios来读取本地json文件

    这篇文章主要介绍了Vue3实现通过axios来读取本地json文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    这篇文章主要介绍了详解webpack打包vue项目之后生成的dist文件该怎么启动运行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue-print-nb实现页面打印功能实例(含分页打印)

    vue-print-nb实现页面打印功能实例(含分页打印)

    在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb,用了还不错,所以下面这篇文章主要给大家介绍了关于vue-print-nb实现页面打印功能的相关资料,需要的朋友可以参考下
    2022-08-08
  • element 表格多级表头子列固定的实现

    element 表格多级表头子列固定的实现

    本文主要介绍了element 表格多级表头子列固定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Vue3使用defineAsyncComponent实现异步组件加载的代码示例

    Vue3使用defineAsyncComponent实现异步组件加载的代码示例

    在 Vue 3 中,异步组件加载是一种优化应用性能的重要手段,通过异步加载组件,可以减少初始加载时的资源体积,从而提升应用的加载速度和用户体验,本文将详细介绍如何使用 defineAsyncComponent 实现异步组件加载,并提供相关的代码示例,需要的朋友可以参考下
    2025-03-03
  • element-ui 实现响应式导航栏的示例代码

    element-ui 实现响应式导航栏的示例代码

    这篇文章主要介绍了element-ui 实现响应式导航栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue分页插件的使用方法

    vue分页插件的使用方法

    这篇文章主要介绍了vue分页插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue集成百度UEditor富文本编辑器使用教程

    vue集成百度UEditor富文本编辑器使用教程

    这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • vue图片加载与显示默认图片实例代码

    vue图片加载与显示默认图片实例代码

    这篇文章主要为大家详细介绍了vue图片加载与显示默认图片的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论