监听scoll调整组件透明度

监听scoll调整组件透明度

在项目中遇到了一个问题，要求完成用户拖动滚轮时，页面顶部一个组件从不显示到完全显示的过程。（vue）

方法如下：
1、给对应的标签绑定 :style = ‘opacityStyle’
2、date中设置

  data () {
    return {
      opacityStyle: {
        opacity: 0
      }
    }
  }

3、设置一个mounted()生命周期函数，当页面数据挂载完成时开始监听scoll事件

  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  }

4、methods中写handleScroll函数

    handleScroll () {
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = { opacity }
      } else {
        this.opacityStyle.opacity=0
      }
    }