13. Proyecto Vue: darse cuenta del efecto de atenuación del encabezado

Nuevo componente header.vue

Introducido en el componente principal Detail.vue

header.vue

Por el router-linkconjunto de etiquetas to属性para la dirección, haga clic en el
conjunto de etiquetas div de la etiqueta de realización de inicio , habrá una propiedad del div

<template>
  <div class="header">
    <router-link tag="div" to="/" class="header-abs">
      <div class="iconfont header-abs-back">&#xe685;</div>
    </router-link>
    <div class="header-fixed">
      <div class="header">
        景点详情
        <router-link to="/">
          <div class="iconfont header-fixed-back">&#xe685;</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: 'DetailHeader'
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
     
     
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.8);
  .header-abs-back {
     
     
    color: #fff;
    font-size: 0.4rem;
  }
}
.header-fixed {
     
     
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $HeaderHeight;
  line-height: $HeaderHeight;
  text-align: center;
  color: #fff;
  background: $bgColor;
  .header-fixed-back {
     
     
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 0.64rem;
    text-align: center;
    font-size: 0.4rem;
  }
}
</style>

Parte lógica

Llame a la función de gancho activado , porque usamos keepalive , por lo que la página se ejecutará tan pronto como se muestre el gancho activado
. La siguiente figura significa vincular un evento "scroll", una vez ejecutado, el método this.handleScroll correspondiente será ser ejecutado

Método addEventListener (), detector de eventos
Puede usar el método removeEventListener () para eliminar el detector de eventos.

gramática:

element.addEventListener(event, function, useCapture);

El primer parámetro es el tipo de evento (como "clic" o "desplazamiento").

El segundo parámetro es la función que se llamará después de que se active el evento.

El tercer parámetro es un valor booleano que se usa para describir si el evento está burbujeando o capturado. Este parámetro es opcional.

Nota: No utilice el prefijo "on". Por ejemplo, utilice "clic" en lugar de "onclick".

Efecto de desvanecimiento

Aquí se usa una expresión ternaria, de modo que la opacidad máxima solo puede ser 1 Los

elementos de revisión F12 pueden ver que el estilo se agrega al div

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

<script>
export default {
     
     
  name: 'DetailHeader',
  data() {
     
     
    return {
     
     
      showAbs: true,
      opacityStyle: {
     
     
        opacity: 0
      }
    }
  },
  methods: {
     
     
    handleScroll() {
     
     
      console.log('scroll')
      // console.log(document.documentElement.scrollTop)
      const top = document.documentElement.scrollTop
      if (top > 60) {
     
     
        let opacity = top / 140
        // 让 opacity 最大值只能是 1
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
     
      opacity }
        this.showAbs = false
      } else {
     
     
        this.showAbs = true
      }
    }
  },
  activated() {
     
     
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated() {
     
     
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="scss" scoped>
@import '~styles/varibles.scss';
.header-abs {
     
     
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.8);
  .header-abs-back {
     
     
    color: #fff;
    font-size: 0.4rem;
  }
}
.header-fixed {
     
     
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $HeaderHeight;
  line-height: $HeaderHeight;
  text-align: center;
  color: #fff;
  background: $bgColor;
  .header-fixed-back {
     
     
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    width: 0.64rem;
    text-align: center;
    font-size: 0.4rem;
  }
}
</style>