如何在 Ionic 2 中更改标题/导航栏

Question

我有一个自定义的<离子标头>背景设计，带有创建倾斜外观的 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>

南海

.discoverHeaderx{
    background-size: cover;
    border:none; 
    background: url('../assets/img/discover_bg.svg');
    background-color:#ffe680;
    -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
    clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}

Answer 1

您可以使用

ionic-angular 中的Content执行此操作。所以在你的.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-scroll (ionScroll)="checkIfTop()">
  ...
</ion-scroll>

您关于非固定标头的问题与第一个关于"切换"标头的问题相同。但是仅供参考，标题始终固定在页面的 tp 上，如果您在 <ion-content> 内使用它，则不会，但在您的情况下，由于您只想切换标题样式，因此代码将起作用。

希望这有帮助。