vue项目笔记（26）-header组件渐隐渐现效果

header组件渐隐渐现效果实现

效果描述：

在滚动页面的时候，页面向上滚动一定距离的时候，header组件的“景点详情”渐渐出现，原有的banner图上面的“返回”消失。页面向下滚动一定距离后，效果反之。如图：

思路分析：

实现上述效果，必须对window的scroll事件进行监听，动态绑定样式，如下：

<template>
  <div>
    <router-link tag="div" class="header-abs" to="/" v-show="showAbs">
      <div class="iconfont header-abs-back">&#xe624;</div>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
      景点详情
      <router-link to="/">
        <div class="iconfont header-fixed-back">&#xe624;</div>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'DetailHeader',
    data(){
      return {
        showAbs: true,
        opacityStyle: {
          opacity: 0
        }
      }
    },
    activated(){
      window.addEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll(){
        const top = document.documentElement.scrollTop;
        if (top > 60) {
          let opacity = top / 140;
          opacity = opacity > 1 ? 1 :opacity;
          this.opacityStyle = {opacity};
          this.showAbs = false;
        } else {
          this.showAbs = true;
        }
        // document.documentElement.scrollTop 表示页面滚动的距离
        console.log(document.documentElement.scrollTop);
      }
    }
  }
</script>