Ionic 4在滚动时隐藏/显示标题指令动画LAGS

Question

我一直在寻找一种在滚动时隐藏和显示ionic 4项目标题的好方法。我通过其他人在表单上的帮助和搜索实现了这一点，但我现在遇到的问题是它太滞后了，就像它闪烁一样，当它隐藏/显示时也是这样。

为此，我使用了一个指令。这是我的离子信息：

Ionic:
   Ionic CLI                     : 5.4.9 (C:UsersMilotAppDataRoamingnpmnode_modulesionic)
   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:UsersMilotAppDataLocalAndroidSdk)
   NodeJS            : v13.2.0 (C:Program Filesnodejsnode.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文件：

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

这是它的视频，第一次是0.1s线性，第二次是0.5s线性：

点击此处查看流媒体视频

我试过这些，但结果相同：

链路1

链路2

链路3

Answer 1

我让我的自定义显示/隐藏页眉-页脚滚动，不再滞后或闪烁干杯！！

 private lastY = 0;
  logScrolling(event){
      // Hide Header on on scroll down
      // console.log(event.detail);
    
      if (event.detail.scrollTop > this.lastY) {
        console.log(this.header);
        document. querySelector(".header").classList.remove('nav-down');
        document. querySelector(".header").classList.add('nav-up');
        document. querySelector(".footer").classList.remove('footer-up');
        document. querySelector(".footer").classList.add('footer-down');
      }else {
        document. querySelector(".header").classList.remove('nav-up');
        document. querySelector(".header").classList.add('nav-down');
        document. querySelector(".footer").classList.remove('footer-down');
        document. querySelector(".footer").classList.add('footer-up');
      }
  
      this.lastY = event.detail.scrollTop;
  }

body {
    padding-top: 40px;
}
header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}
.nav-up {
    top: -40px;
}
main {
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}
footer { 
    background: #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    transition: bottom 0.2s ease;
}
.footer-down{
    bottom: -40px;
}
* { color: transparent}

<ion-content (ionScroll)="logScrolling($event)" #content id="ion-content" scrollEvents="true">
  <header id="header" class="nav-down header">
    This is your menu.
  </header>
  <main>
    This is your body.
  </main>
  <footer id="footer" class="footer">
    This is your footer.
  </footer>
</ion-content>