vue中监听页面滚动事件

最新推荐文章于 2024-05-09 10:52:07 发布

小楼昨夜那事

最新推荐文章于 2024-05-09 10:52:07 发布

阅读量1.4k

点赞数 2

分类专栏： Vue脚手架 Vue框架

本文链接：https://blog.csdn.net/T_ambition/article/details/109276475

版权

Vue框架同时被 2 个专栏收录

15 篇文章

订阅专栏

Vue脚手架

3 篇文章

订阅专栏

页面监听滚动

首先在data中return一个scrollTop数据用来存储滚动的高度

其次在methods中定义一个方法用来进行你需要进行的操作

接着就是在mounted中绑定事件于window上，这里只能使用事件监听addEventListener的方法

最后就是离开这个页面时，销毁事件监听removeEventListener，因为如果我们不进行销毁的话，在离开当前页面会影响其他的页面操作

代码如下；

<script>
export default {
  data () {
    return {
      // 页面滚动的高度
      scrollTop: 0
    }
  },
  mounted () {
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll () {
      // 滚动距离的兼容性写法
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop >= 10) {
        document.querySelector('.van-nav-bar').style.display = 'none'
      } else {
        document.querySelector('.van-nav-bar').style.display = 'block'
      }
    }
  }
}
</script>