ionic-framework - 如何在 ionic 4 中隐藏滚动标题？

Question

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

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

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

Answer 1

感谢 this video我让它工作。

首先调用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 .

大部分代码与视频中显示的相同。我更改了 host -来自 @Directive 的属性并使用了最新的 HostListener .

如果要在多个指令中使用该指令，则需要创建一个 SharedModule .

为此，请使用 ng g module shared 创建模块.之后，添加 HideHeaderDirective到 declarations和 exports大批。
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 {}

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

Note: You cannot import the directive in app.module.ts and use it in a submodule! You have to import the shared module in every direct module you want to use the directive in.

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