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

ozxc1zmp  于 2023-02-20  发布在  Ionic
关注(0)|答案(1)|浏览(146)

我在离子应用程序工作,我想隐藏导航栏和标签向下滚动,并显示他们向上滚动。有人知道如何做到这一点吗?请帮助。提前感谢。

lrl1mhuk

lrl1mhuk1#

一个非常简单的实现是:

  • 添加一个var作为state的布尔标志(显示/隐藏)
  • 将变更检测器引用添加到您的组件中(因为您将需要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。
还请注意,理想情况下,您不希望滚动事件成为"垃圾邮件",因此您需要实现正确的方式来捕获没有滚动事件的状态(向上或向下)(去抖动/节流)

相关问题