四十四、Vue中监听滚动事件

// 当页面出现时调用(当我们在组件中使用 <keep-alive> 时，才会出现的生命周期函数)
    activated() {
        // 监听滚动事件
        window.addEventListener('scroll', this.handleScroll)
    },
    // 当页面隐藏时调用(当我们在组件中使用 <keep-alive> 时，才会出现的生命周期函数)
    deactivated () {
        // 解绑滚动事件
        window.removeEventListener('scroll', this.handleScroll)
    },

//得到距离顶部的滚动距离
const top = document.documentElement.scrollTop

备注：
  window.addEventListener() 绑定的是全局事件，意思是不仅在本组件中生效，在其他组件中也会生效。
  为了避免在其他组件中生效，我们需要解绑全局事件，解绑方法就是 window.removeEventListener() 。