Как спрятать заголовок на свитке в ionic 4?

Question

Я хотел знать, как я могу скрыть заголовок в Ionic 4, прокручивая страницу вниз, и повторно показывать его при прокрутке вверх.

Я нашел много решений о том, как это сделать, но все ониоказалось, что он не работает или устарел.

Поэтому я собрал всю информацию, которую смог найти, чтобы дать этот ответ.

Answer 1

Благодаря этому видео Я получил его на работу.

Прежде всего, позвоните 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>

Takeзабота об атрибутах 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 {}

Теперь добавьте общий модуль ко всем модулям, которые вы хотитеиспользуйте директиву in.

Примечание: вы не можете импортировать директиву в app.module.ts и использовать ее в подмодуле!Вы должны импортировать общий модуль в каждый прямой модуль, в котором вы хотите использовать директиву.

Мои текущие версии node, npm и ionic: