vue监听滚动事件的方法

 更新时间:2020年12月21日 10:00:34   作者:东海之子  
这篇文章主要介绍了vue监听滚动事件的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附; 2. 根据滚动的位置激活对应的tab键(锚链接tab键)

这两种方式的处理都是可通过监听scroll来实现

mounted(){
  window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理
}

处理方法

1. 滚动到顶部吸附

html元素

<!--如果isFixed为true的话,就添加class is_fixed 设置固定定位-->
<div id="boxFixed" :class="{'is_fixed' : isFixed}">
这个是要滚动到顶部吸附的元素
</div>

methods方法

handleScroll(){
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
  let offsetTop = document.querySelector('#boxFixed').offsetTop; // 要滚动到顶部吸附的元素的偏移量
  this.isFixed = scrollTop > offsetTop ? true : false; // 如果滚动到顶部了,this.isFixed就为true
}

2. 根据滚动的位置激活对应的tab键(锚链接tab键)

vue里实现锚链接,不能直接用a链接方式,因为用的是hash路由,直接a链接会跳转路由,可用scrollIntoView ,具体参照 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

(1) 实现锚链接:

<div class="flexitem" v-for="(item,index) in tabs" :class="seeThis==index?'active':''"><a href="javascript:void(0)" rel="external nofollow" @click="goAnchor(index)">{{item}}</a></div>

<div id="anchor1">block1</div>

(2) 实现滚动到相应的位置激活tab

data(){
  return{
    seeThis:0,
    tabs:['tab0','tab1','tab2'],
  }
},
methods:{
  goAnchor(index) { // 也可以用scrollIntoView方法, 但由于这里头部设置了固定定位,所以用了这种方法
    // document.querySelector('#anchor'+index).scrollIntoView()
    this.seeThis = index; var anchor = this.$el.querySelector('#anchor'+index)
    document.body.scrollTop = anchor.offsetTop-100
    document.documentElement.scrollTop = anchor.offsetTop-100
  },
}
methods:{
  handleScroll(){
    var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop-100
    var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop-100
    var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop-100
    if(scrollTop>anchorOffset0&&scrollTop<anchorOffset1){
      this.seeThis = 0
    }
    if(scrollTop>anchorOffset1&&scrollTop<anchorOffset2){
      this.seeThis = 1
    }
    if(scrollTop>anchorOffset2){
      this.seeThis = 2
    }
  },
}

以上就是vue监听滚动事件的方法的详细内容,更多关于vue监听滚动事件的资料请关注脚本之家其它相关文章!

相关文章

  • 基于Vue实现人民币小写转为大写功能

    基于Vue实现人民币小写转为大写功能

    在金融类应用中,经常需要将金额从小写数字转换为大写形式,这种转换主要用于正式票据、合同等场合,以增加文本的专业性和可读性,本文将详细介绍如何在Vue.js项目中实现这一功能,并提供多个示例和详细的代码说明,需要的朋友可以参考下
    2024-09-09
  • Vue组件如何自动按需引入详析

    Vue组件如何自动按需引入详析

    刚学vue时候对于全局组件和局部组件有点懵,不知道什么时候用全局,什么时候用局部,下面这篇文章主要给大家介绍了关于Vue组件如何自动按需引入的相关资料,需要的朋友可以参考下
    2021-12-12
  • Vue实现一个带有缓存功能的Tab页签功能

    Vue实现一个带有缓存功能的Tab页签功能

    在现代 Web 应用中,Tab 页签功能是非常常见的一种交互模式,它可以帮助用户在不同的视图间快速切换,而不会丢失当前视图的状态,本文将介绍如何在 Vue 项目中实现一个带有缓存功能的 Tab 页签功能,需要的朋友可以参考下
    2024-08-08
  • 详解Vue计算属性原理

    详解Vue计算属性原理

    计算属性是Vue中比较好用的API,开发者可以利用计算属将复杂的计算进行缓存,同时基于它的响应式特性,我们无需关注数据更新问题,但需要注意的是,计算属性是惰性求值的,本文将详细介绍计算属性的实现原理,需要的朋友可以参考下
    2023-05-05
  • sortable+element 实现表格行拖拽的方法示例

    sortable+element 实现表格行拖拽的方法示例

    这篇文章主要介绍了sortable+element 实现表格行拖拽的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue路由守卫案例代码

    Vue路由守卫案例代码

    在Vue中,路由守卫分为三种:全局路由守卫、独享路由守卫以及组件内路由守卫,本文重点介绍Vue路由守卫案例代码,需要的朋友可以参考下
    2023-02-02
  • Vue Echarts实现图表的动态适配以及如何优化

    Vue Echarts实现图表的动态适配以及如何优化

    这篇文章主要介绍了Vue Echarts实现图表的动态适配以及如何优化,在实际的前端开发过程中,动态适配是一个非常重要的问题,在数据可视化的场景下,图表的动态适配尤为重要,需要的朋友可以参考下
    2023-05-05
  • vue 自动检测手机端响应式布局的五种实现

    vue 自动检测手机端响应式布局的五种实现

    本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下
    2024-07-07
  • 基于vue3&element-plus的暗黑模式实例详解

    基于vue3&element-plus的暗黑模式实例详解

    实现暗黑主题的方式有很多种,也有很多成型的框架可以直接使用,下面这篇文章主要给大家介绍了关于基于vue3&element-plus的暗黑模式的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue新建环境变量以及网络请求工具axios的二次封装详解

    vue新建环境变量以及网络请求工具axios的二次封装详解

    这篇文章主要为大家介绍了vue新建环境变量以及网络请求工具axios的二次封装详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论