Vue2.5 学习笔记 9.3 详情页的header渐隐渐现

迷南。 2022-02-23 14:12 194阅读 0赞

效果是 在详情页的页面内容往下拉的时候  顶部的标题栏能够渐渐的显现出来

开始：

1. 建子组件

detail/components/Header.vue

然后那些吧子组件加到Detail.vue的步骤就不写了

直接把代码贴出来 在代码中加注释

<template>
      <div>
    // 这部分是左边的那个小箭头 用于返回到首页的
        <router-link
          tag="div"
          to="/"
          class="header-abs"
    // 这是用于判断顶部样式和这个返回键的切换
          v-show="showAbs"
        >
        <div class="iconfont header-abs-back"></div>
        </router-link>
    
    // 这是导航栏的部分
        <div
          class="header-fixed"
          v-show="!showAbs"
    // 这里 这里是样式绑定。 等下需要改变样式
          :style="opacityStyle"
        >
          <router-link to='/'>
            <div class="iconfont header-fixed-back"></div>
          </router-link>
          景点详情
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'DetailHeader',
      data () {
        return {
          showAbs: true,
    // 透明度 先设置为0
          opacityStyle: {
            opacity: 0
          }
        }
      },
      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
          }
        }
      },
    // 教程里面是说用 activated 但是没用  我尝试着使用created 竟然可以 那我就用这个好了
      created () {
    // 监听页面滚动
        window.addEventListener('scroll', this.handleScroll)
      }
    }
    </script>
    
    <style lang="stylus" scoped>
      @import '~styles/varibles.styl'
      .header-abs
        position: absolute
        left: .2rem
        top: .2rem
        width: .8rem
        height: .8rem
        line-height: .8rem
        border-radius: .4rem
        text-align: center
        background: rgba(0, 0, 0, 0.8)
        .header-abs-back
          color: #fff
          font-size: .4rem
      .header-fixed
        position: fixed
        top: 0
        left: 0
        right: 0
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .32rem
        .header-fixed-back
          position: absolute
          top: 0
          left: 0
          width: .64rem
          text-align: center
          font-size: .4rem
          color: #fff
    </style>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

拉动下来的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1][]

打动大于140的时候：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220223/c1921e20565d4f8895e204de61ea234a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 1]: /images/20220223/afc7bbb1c6504fde8c870bfa12321a9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70 2]: /images/20220223/3192daf8b44e40c687183d53ff5bf24d.png