Ionic framework 爱奥尼亚3-在向下滚动时隐藏导航栏和选项卡，在向上滚动时显示

我正在开发Ionic应用程序，我想在向下滚动时隐藏导航栏和选项卡，在向上滚动时显示它们。 有人知道怎么做吗？请帮忙。

---

提前感谢。

一个非常简单的实现是：

• 添加一个变量作为状态的布尔标志（显示/隐藏）
• 将变更检测器ref添加到组件中（因为您需要cdr 更改此布尔值以传播用户界面）
• 通过*ngIf指令绑定页眉/页脚

大概是这样的：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage2 {

  headerVisible: boolean = false;

  constructor(
    public cdr: ChangeDetectorRef
  ) {
  }

  scrollState(event) {
    if (event.directionY == "up") {
      this.headerVisible = false;
    } else {
      this.headerVisible = true;
    }
    this.cdr.detectChanges();
  }

}

在模板中：

<ion-header *ngIf="headerVisible">
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

离子空白

但是，如果您想改变页眉/页脚的高度，以便您的整个模板能够更好地处理页边距，则最有可能使用*ngi而不是*ngi

---

另外，请注意，理想情况下，您不希望将事件滚动到“垃圾邮件”，因此您需要实现适当的方式来捕获状态（向上或向下），而不使用它（去盎司/节流）

将您尝试过的代码发布在此处。没有人可以直接为您编写代码。我不知道如何做到这一点，我没有为此尝试任何代码。我只是需要一个想法，而不是整个代码。你可以使用ionic获得滚动方向，因此你可以在内容上隐藏和显示导航栏或tabJust subscribe（ionScroll），例如比较新旧滚动条的值。如果oldnew向上滚动。