Ionic 6：实现滚动时显示/隐藏通用<app-header>组件

核心思路 #

通过监听ion-content的滚动事件，判断滚动方向，动态切换自定义<app-header>组件的显示状态，同时封装通用逻辑避免重复代码。

步骤1：改造组件 #

在自定义头部组件中添加显示状态控制，并绑定样式实现平滑过渡：

组件模板 (app-header.component.html)

<header [class.hidden-header]="!isVisible">
  <!-- 你的头部内容，比如标题、导航按钮 -->
  <h1>页面标题</h1>
</header>

组件样式 (app-header.component.scss)

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.hidden-header {
  transform: translateY(-100%);
}

组件逻辑 (app-header.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {
  isVisible = true; // 控制显示状态
}

步骤2：在页面中监听滚动事件（基础版） #

如果只在单个页面使用，直接在页面中监听ion-content的滚动事件：

页面模板 (home.page.html)

<app-header #header></app-header>
<ion-content (ionScroll)="onScroll($event)" style="--ion-content-padding-top: 56px;">
  <!-- 页面滚动内容 -->
</ion-content>

注意：设置--ion-content-padding-top避免内容被固定头部遮挡，值需和header高度一致。

页面逻辑 (home.page.ts)

import { Component, ViewChild } from '@angular/core';
import { AppHeaderComponent } from '../app-header/app-header.component';
import { ScrollDetail } from '@ionic/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('header') header!: AppHeaderComponent;
  private lastScrollTop = 0;

  onScroll(event: CustomEvent<ScrollDetail>) {
    const scrollTop = event.detail.scrollTop;
    
    // 向下滚动超过50px时隐藏头部，向上回滚20px时显示头部
    if (scrollTop > this.lastScrollTop && scrollTop > 50) {
      this.header.isVisible = false;
    } else if (scrollTop < this.lastScrollTop - 20) {
      this.header.isVisible = true;
    }
    
    this.lastScrollTop = scrollTop;
  }
}

步骤3：封装通用指令（推荐，支持任意页面） #

为了避免每个页面重复写滚动逻辑，创建一个Angular指令，将滚动监听逻辑封装进去：

滚动指令 (scroll-header.directive.ts)

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
import { AppHeaderComponent } from './app-header.component';
import { ScrollDetail } from '@ionic/core';

@Directive({
  selector: '[appScrollHeader]'
})
export class ScrollHeaderDirective implements AfterViewInit {
  @Input('appScrollHeader') targetHeader!: AppHeaderComponent;
  private lastScrollTop = 0;

  constructor(private el: ElementRef<HTMLIonContentElement>) {}

  ngAfterViewInit() {
    this.el.nativeElement.addEventListener('ionScroll', (event: CustomEvent<ScrollDetail>) => {
      const scrollTop = event.detail.scrollTop;
      
      if (scrollTop > this.lastScrollTop && scrollTop > 50) {
        this.targetHeader.isVisible = false;
      } else if (scrollTop < this.lastScrollTop - 20) {
        this.targetHeader.isVisible = true;
      }
      
      this.lastScrollTop = scrollTop;
    });
  }
}

在任意页面使用指令

页面模板只需添加指令绑定即可，无需再写滚动逻辑：

<app-header #header></app-header>
<ion-content appScrollHeader [appScrollHeader]="header" style="--ion-content-padding-top: 56px;">
  <!-- 页面内容 -->
</ion-content>

关键细节 #

• 滚动阈值（50px、20px）可根据需求调整，避免微小滚动频繁触发显示/隐藏
• 确保app-header的position: fixed，否则滚动时会跟着内容移动
• 过渡动画使用transform而非top，性能更优

内容的提问来源于stack exchange，提问作者Saraswati