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

最新推荐文章于 2024-07-24 14:49:56 发布

CHH5431

最新推荐文章于 2024-07-24 14:49:56 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 动画窗口滚动文章标签：渐隐渐现

本文链接：https://blog.youkuaiyun.com/qq_41115965/article/details/81771368

Vue 同时被 3 个专栏收录

76 篇文章

订阅专栏

动画

6 篇文章

订阅专栏

窗口滚动

3 篇文章

订阅专栏

这篇博客详细记录了如何在Vue项目中创建header组件的渐隐渐现效果。当页面向上滚动时，'景点详情'逐渐显示，'返回'按钮消失；反之则隐藏。实现的关键在于监听window的scroll事件并动态调整样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>