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> 

に行く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); 

} 

Answer 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にあなたは条件付きでこのお仕事をする'LLについて

<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>の中で使用すると、ヘッダーのスタイルが切り替わるので、あなたのケースでは使用できません。

これが役に立ちます。