Question

我正在使用Ionic App，我想隐藏导航栏和标签向下滚动并向上滚动显示它们。有人知道怎么做吗？请帮忙。提前谢谢。

Answer 1

一个非常天真的实现将是：

添加一个var，它将成为状态的布尔标志（显示/隐藏）
将更改检测器ref添加到您的组件中（因为您需要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>

但最有可能的是，而不是* ng如果你想要改变标题的页脚高度，以便你的整体模板更好地处理边距。

另请注意，理想情况下，您不希望滚动事件发送到＃＆＃34;垃圾邮件＆＃34;所以你需要实现正确的方法来捕捉状态（向上或向下）而没有它（去抖/扼杀它）

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

1 个答案: