在Ionic 4中隐藏内容滚动标题 [英] Hiding header on content scrolling in Ionic 4

问题描述

离子头是固定的，始终保持在屏幕顶部.

ion-header is fixed, it stays at the top of the screen at all times.

我希望它随着您滚动的页面一起消失.

I would like it to disappear with the page as you scroll.

我已经将其放入可以起作用的离子含量中，但是它具有意想不到的副作用.有谁知道如何创建离子头，使其始终不固定在顶部并随页面一起移动?

Ive put it into ion-content which works but it has unintended side effects. Does anyone know how to create ion-header so that its not fixed to the top at all time and moved with the page ?

推荐答案

关于

<ion-header *ngIf="hide">

捕获事件并执行

this.hide = !this.hide;

使用按钮单击事件进行了测试，并且可以::

Tested with a button click event, and works :)

可以使用简单CSS类更改相同的内容，但这取决于您的要求.

Same can be changed using Simple CSS Class, but it's up to you as per your requirements.

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">

在后面的onScroll功能代码中，您可以切换隐藏"

in the onScroll function code behind you can toggle the "hide"

onScroll(event:any) { 
    console.log(event); 
    this.hide = !this.hide; 
}

显示/隐藏标题的变量.

variable to show/hide the header.

此外，以下离子4如何滚动到顶部使用离子内容滚动事件" 可能对您如何滚动内容很有帮助.

Also, the following ionic-4-how-to-scroll-to-top-bottom-using-ion-content-scroll-events may be helpful for you as to how to scroll the content.

这篇关于在Ionic 4中隐藏内容滚动标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！