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;
      }
    }
  }

你可能感兴趣的:(vue,vue)