Question

Я искал и искал хороший способ скрыть и показать заголовок в проекте ioni c 4 во время прокрутки. Я добился этого с помощью других в форме и с помощью поиска, но сейчас у меня проблема в том, что он такой медленный, как будто мерцает и что-то в этом роде, когда он прячется / показывает.

Для этого я использовал директиву. Вот мой ioni c info:

Ionic:

   Ionic CLI                     : 5.4.9 (C:\Users\Milot\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 10 other plugins)

Utility:

   cordova-res : 0.8.1 (update available: 0.9.0)
   native-run  : 0.2.9 (update available: 0.3.0)

System:

   Android SDK Tools : 26.1.1 (C:\Users\Milot\AppData\Local\Android\Sdk)
   NodeJS            : v13.2.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.1
   OS                : Windows 10

И вот как я использовал директиву:

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

@Directive({
  selector: "[myScrollVanish]"
})
export class ScrollVanishDirective implements OnInit {
  @Input("myScrollVanish") scrollArea;

  private hidden: boolean = false;
  private triggerDistance: number = 1;

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

  ngOnInit() {
    this.initStyles();

    this.scrollArea.ionScroll.subscribe(scrollEvent => {
      let delta = scrollEvent.detail.deltaY;

      if (scrollEvent.detail.currentY === 0 && this.hidden) {
        this.show();
      } else if (!this.hidden && delta > this.triggerDistance) {
        this.hide();
      } else if (this.hidden && delta < -this.triggerDistance) {
        this.show();
      }
    });
  }

  initStyles() {
    this.domCtrl.write(() => {
      this.renderer.setStyle(
        this.element.nativeElement,
        "transition",
        "0.1s linear"
      );
      this.renderer.setStyle(this.element.nativeElement, "height", "52px");
    });
  }

  hide() {
    this.domCtrl.write(() => {
    //   this.renderer.setStyle(this.element.nativeElement, "min-height", "0px");
      this.renderer.setStyle(this.element.nativeElement, "height", "0px");
    //   this.renderer.setStyle(this.element.nativeElement, "opacity", "0");
    //   this.renderer.setStyle(this.element.nativeElement, "padding", "0");
    });

    this.hidden = true;
  }

  show() {
    this.domCtrl.write(() => {
      this.renderer.setStyle(this.element.nativeElement, "height", "52px");
    //   this.renderer.removeStyle(this.element.nativeElement, "opacity");
    //   this.renderer.removeStyle(this.element.nativeElement, "min-height");
    //   this.renderer.removeStyle(this.element.nativeElement, "padding");
    });

    this.hidden = false;
  }
}

html file:

<ion-header>
  <ion-toolbar [myScrollVanish]="scrollArea">
  </ion-toolbar >
</ion-header>
<ion-content #scrollArea scrollEvents="true"> ... </ion-content>

и вот видео этого, первый раз с линейной 0,1 с, а второй с линейной 0,5 с:

Нажмите здесь, чтобы посмотреть видео в потоковом режиме

i пробовал это, но с теми же результатами:

Ссылка 1

Ссылка 2

Ссылка 3