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 {}

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

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

我当前的node，npm和ionic版本：

Answer 2

对我来说，隐藏的指令不能很好地工作，因为标题一直在闪烁...

对我来说最好的解决方案是非常简单和干净。

将标题放置在容器内

<ion-content>
    <ion-header>
       <ion-toolbar></ion-toolbar>
    </ion-header>
</ion-content>

页眉随页面滚动，如果您想将页眉固定在顶部，请将CSS更改为：

ion-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

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

2 个答案: