Ionic framework 如何在爱奥尼亚2中更改标题/导航栏

我有一个定制的背景设计，带有CSS剪辑路径，可以创建倾斜的外观。我想能够改变导航栏到一个标准的离子导航栏设计的使用滚动下来的页面

我想要实现的是，当用户向下滚动时，我希望它变为标准导航栏，当用户滚动到页面顶部时，返回到我的自定义背景

<ion-header no-border class="discoverHeaderx" >

  <ion-navbar  class="feedNavbarDiscover" no-fixed no-border>

    <button ion-button menuToggle>
      <ion-icon name="menu" color="purple"></ion-icon>
    </button>

    <ion-title ></ion-title>

  </ion-navbar>


</ion-header>

---

您可以使用

中的
内容
执行此操作。因此，在.TS文件中，您需要：

import { ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

export class YourPage {
  @ViewChild(Content) content: Content; // getting a reference to the content
  public offsetFromTop: number = 0;

  // EVERYTIME YOU SCROLL YOUR PAGE IT'LL GET THE NUMBER OF PX IT HAS SCROLLED AWAY FROM THE TOP
  checkIfTop() {
    this.offsetFromTop = this.content.scrollTop;
  }
}

在HTML中，您将有条件地使用自定义标头的类

<ion-header no-border [ngClass]="{'discoverHeaderx': offsetFromTop == 0}">
  <!-- THIS'LL ADD YOUR CLASS IF THE USER IS ON TOP OF THE PAGE, IF YOU 
       WANT TO SHOW THE CUSTOMIZED HEADER EARLIER YOU CAN USE offsetFromTop < x AND X BEEING A NUMBER YOU WANT. -->
  <ion-navbar  class="feedNavbarDiscover" no-fixed no-border>
    <button ion-button menuToggle>
      <ion-icon name="menu" color="purple"></ion-icon>
    </button>
    <ion-title ></ion-title>
  </ion-navbar>
</ion-header>



要使其正常工作，您需要在ion内容中添加一个滚动事件，以便在每次滚动时执行功能

<ion-scroll (ionScroll)="checkIfTop()">
  ...
</ion-scroll>


...

关于非固定标题的问题与第一个关于“切换”标题的问题相同。但仅供参考，页眉始终固定在页面的tp上，如果您在
中使用它，则不会出现这种情况，但在您的情况下，由于您只想切换页眉样式，因此代码将正常工作

希望这有帮助

<ion-scroll (ionScroll)="checkIfTop()">
  ...
</ion-scroll>