我在离子应用程序工作,我想隐藏导航栏和标签向下滚动,并显示他们向上滚动。有人知道如何做到这一点吗?请帮助。提前感谢。
lrl1mhuk1#
一个非常简单的实现是:
大概是这样的
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。还请注意,理想情况下,您不希望滚动事件成为"垃圾邮件",因此您需要实现正确的方式来捕获没有滚动事件的状态(向上或向下)(去抖动/节流)
1条答案
按热度按时间lrl1mhuk1#
一个非常简单的实现是:
大概是这样的
在您的模板中:
但最有可能的是,如果你想改变页眉/页脚的高度,让你的整体模板更好地处理边距,而不是 * ngIf。
还请注意,理想情况下,您不希望滚动事件成为"垃圾邮件",因此您需要实现正确的方式来捕获没有滚动事件的状态(向上或向下)(去抖动/节流)