首页 文章

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

提问于
浏览 次
-1

我有一个自定义的<ion-header>背景设计，带有一个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>

SCSS

.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);

}
ionic-framework ionic2

1 回答

  • 1

    您可以使用 Content 从 ionic-angular 执行此操作 . 所以在你的.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中，您将有条件地使用将自定义 Headers 的类

    <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>

    您关于非固定标头的问题与第一个关于"switching"标头的问题相同 . 但是fyi的 Headers 总是固定在页面的tp上，如果你在 <ion-content> 中使用它就不会，但在你的情况下，因为你只想切换 Headers 样式，代码将起作用 .

    希望这可以帮助 .

    回复于

相关问题