Vue2.5 旅游项目实例20 详情页 实现Header渐隐渐显效果

创建分支：detail-header

拉取到本地并切换分支：

git pull
git checkout detail-header

在detail/components目录下，创建Header.vue文件：

<template>
<div>
  <div class="header-abs"></div>
  <div class="header-fixed"></div>
</div>
</template>

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

<style lang="stylus" scoped>

</style>

然后在Detail.vue中引用：

<template>
<div>
  <detail-banner></detail-banner>
  <detail-header></detail-header>
  <div style="height:50rem"></div>
</div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader
  }
}
</script>

<style lang="stylus" scoped>

</style>

因为要展示出效果，所以我们在下面页面写了一个div设置了50rem的告诉，让页面撑开。

回到Header.vue继续编辑代码：

<template>
<div>
  <div class="header-abs">
    <div class="iconfont header-abs-back">&#xe624;</div>
  </div>
  <div class="header-fixed"></div>
</div>
</template>

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

<style lang="stylus" scoped>
.header-abs
  position: absolute
  left: .2rem
  top: .2rem
  width: .8rem
  height: .8rem
  line-height: .8rem
  text-align:center
  border-radius: .4rem
  background: rgba(0, 0, 0, .8)
  .header-abs-back
    color: #fff
    font-size: .4rem
</style>

效果图：

下面要点击返回箭头，返回到首页：

<template>
<div>
  <router-link tag="div" to="/" class="header-abs">
    <div class="iconfont header-abs-back">&#xe624;</div>
  </router-link>
  <div class="header-fixed"></div>
</div>
</template>

然后是 header-fixed 区域：

<div class="header-fixed">
    <router-link to="/">
      <div class="header-left"><div class="iconfont header-fixed-back">&#xe624;</div></div>
    </router-link>
    景点详情
</div>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.header-fixed
  position: fixed
  top: 0
  left: 0
  right: 0
  height $headerHeight
  line-height $headerHeight
  text-align:center
  color:#fff
  font-size: .32rem
  background: $bgColor
  .header-fixed-back
    position:absolute
    top:0
    left:0
    width: .64rem
    text-align: center
    font-size: .4rem
    color: #fff
</style>

此时效果图：

下面就要写业务逻辑了，先定义一个变量：

<router-link tag="div" to="/" class="header-abs" v-show="showAbs">
    <div class="iconfont header-abs-back">&#xe624;</div>
</router-link>
<div class="header-fixed"  v-show="!showAbs">

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true
    }
  }
}
</script>

现在一进页面时，只显示header-abs区域了，下面就要当页面往下滚动到60像素左右，让 header-fixed 区域显示：

// 因为用了keepalive，所以要用activated
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      // console.log(document.documentElement.scrollTop)
      const top = document.documentElement.scrollTop
      if (top > 60) {
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  }

此时页面往下滚动，header-abs 隐藏，header-fixed 区域显示，然后要实现渐隐渐显的效果：

<div class="header-fixed" v-show="!showAbs" :style="opactiyStyle">

<script>
export default {
  name: 'DetailHeader',
  data () {
    return {
      showAbs: true,
      opactiyStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      // console.log(document.documentElement.scrollTop)
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opactiyStyle = {
          opacity: opacity
        }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  }
}
</script>

OK，当top在60-140像素之间是渐隐渐显的效果。

效果图：

然后可以提交代码：

git add .
git commit -m "实现header渐隐渐显效果"
git push

git checkout master
git merge detail-header
git push