Ionic 3- 向下滚动时隐藏导航栏和选项卡，向上滚动时显示答案

【问题标题】：Ionic 3- Hide navbar and tabs on scroll down, and show on scroll upIonic 3- 向下滚动时隐藏导航栏和选项卡，向上滚动时显示
【发布时间】：2018-05-18 06:28:00
【问题描述】：

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

【问题讨论】：

在此处发布您尝试过的代码。没有人可以直接为你写代码。
我不知道该怎么做，我没有尝试任何代码。我只需要一个想法，而不是整个代码。
您将使用 ionic 获得滚动方向，因此基于您隐藏和显示导航栏或选项卡
只需在您的内容上订阅 (ionScroll)，例如比较新旧 scrollTop 值。如果旧的新的，你向上滚动。

标签： ionic-framework ionic2 ionic3

【解决方案1】：

一个非常幼稚的实现是：

添加一个变量作为状态的布尔标志（显示/隐藏）
将更改检测器引用添加到您的组件中（因为您需要 cdr 更改此布尔值以传播 UI）
通过 *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>

但很可能不是 *ngIf 您想要更改页眉/页脚的高度，以便您的整个模板更好地处理边距。

另外请注意，理想情况下您不希望滚动事件成为“垃圾邮件”，因此您需要实施正确的方式来捕获没有它的状态（向上或向下）（去抖动/限制它）

【讨论】：