使用Vue如何实现一个Header渐隐渐现效果-创新互联

使用Vue如何实现一个Header渐隐渐现效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联公司是一家集成都网站设计、网站制作、网站页面设计、网站优化SEO优化为一体的专业的建站公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

新建header.vue组件

引入到父组件Detail.vue中

header.vue

通过router-link标签设置to属性为地址，实现点击返回首页
tag标签设为div，就有了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>