Vue实现滚动页面头部背景渐变实现

一、在页面加载完成后，在开始滚动之前：

将返回按钮所在的div 设置绝对定位，用标志位isSHow设置v-show

<div class="iconfont back_up" @click="gotoup" v-show="isSHow">&#xe60d;</div>

先在data中定义属性:

data(){
	return {
		showhash:true,   //显示隐藏的头部
		 isSHow: true,    //默认显示的返回按钮
	}
}

将"Header"栏所在的div 设置固定定位，用标志位showhash设置v-show
:style=“opacityStyle” 这个不懂什么意思看下面

<div class="about_header_box" v-show="!showhash" :style="opacityStyle">
      <div class="iconfont back_">&#xe60d;</div>
      <div>故宫</div>
      <div></div>
</div>

二、监听滚动事件

包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。注意组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

第一个可以使用 mounted () {} 这个钩子 可以替换activated
第一个可以使用 destroyed () {} 这个钩子 可以替换deactivated

  // 在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据 
  activated() {
    window.addEventListener("scroll", this.handleScroll);
  },

//在离开当前页面后，解除对这个全局事件的绑定
deactivated() {
    window.removeEventListener("scroll", this.handleScroll);
  },

三、给"Header"绑定了 opacityStyle 对应的样式

当页面滚动距离在指定区间内，就让透明度随着滚动距离而变化
当顶部栏完全显示（opacity=1）后不再变化颜色称为设置颜色的本身

data () {
    return {
      showhash:true,   //显示隐藏的头部
      //就是上面写的绑定的
      opacityStyle: {
        // 设置初始状态是透明的
        opacity: 0
      }
    }
  },
methods: {
    handleScroll () {
    //获取当前页面的滚动条纵坐标位置      网页被卷去的高
      const top = document.documentElement.scrollTop || document.body.scrollTop 
      if (top > 60) {
        let opacity = top / 140;
        //就是看这个我们设置的那个属性是不是小于1的没达到条件之前就是半透明状态
        opacity = opacity > 1 ? 1 : opacity;
        this.opacityStyle = { opacity };
        this.showhash = false;
      } else {
        this.showhash = true;
      }
    }
  }