如何在 ionic 4 中隐藏滚动条上的标题？

我想知道如何通过向下滚动页面来隐藏 Ionic 4 中的标题，并在向上滚动时重新显示它。

我找到了许多关于如何做到这一点的解决方案，但结果都证明它们不起作用或已经过时了。

因此，我收集了我能找到的所有信息来提供这个答案。

谢谢这个视频我让它工作了。

首先打电话ionic g directive directives/hide-header。你当然可以替换directive/hide-header用您自己的路径和名称。

hide-header.directive.ts

import { Directive, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
import { DomController } from '@ionic/angular';

@Directive({
    selector: '[appHideHeader]'
})
export class HideHeaderDirective implements OnInit {

    @Input('header') header: any;

    private lastY = 0;

    constructor(
        private renderer: Renderer2,
        private domCtrl: DomController
    ) { }

    ngOnInit(): void {
        this.header = this.header.el;
        this.domCtrl.write(() => {
            this.renderer.setStyle(this.header, 'transition', 'margin-top 700ms');
        });
    }

    @HostListener('ionScroll', ['$event']) onContentScroll($event: any) {
        if ($event.detail.scrollTop > this.lastY) {
            this.domCtrl.write(() => {
                this.renderer.setStyle(this.header, 'margin-top', `-${ this.header.clientHeight }px`);
            });
        } else {
            this.domCtrl.write(() => {
                this.renderer.setStyle(this.header, 'margin-top', '0');
            });
        }

        this.lastY = $event.detail.scrollTop;
    }

}

之后，在您的模板中：

<ion-header #header>
    <ion-toolbar><ion-title>Test</ion-title></ion-toolbar>
</ion-header>
<ion-content scrollEvents="true" appHideHeader [header]="header">
</ion-content>

照顾好scrollEvents, appHideHeader和[header]属性！最后一个将 header 元素作为参数，在本例中#header.

大部分代码与视频中所示的相同。我改变了host- 财产来自@Directive并使用了最新的主机监听器.

如果要在多个指令中使用该指令，则需要创建一个共享模块.

为此，请使用以下命令创建模块ng g module shared。之后，添加HideHeaderDirective to the declarations和exports array.

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HideHeaderDirective } from './directives/hide-header.directive';


@NgModule({
    declarations: [HideHeaderDirective],
    exports: [HideHeaderDirective],
    imports: [
        CommonModule
    ]
})
export class SharedModule {}

现在将共享模块添加到要在其中使用该指令的所有模块。

注意：您不能导入该指令app.module.ts并在子模块中使用它！您必须在要使用该指令的每个直接模块中导入共享模块。

我当前的版本node, npm and ionic: