如何更改Ionic 2中的標題欄/導航欄

-1

我有一個自定義的< ion-header>背景設計，它帶有一個創建傾斜外觀的CSS剪輯路徑。當用戶向下滾動頁面時，我希望能夠將導航欄更改爲標準的離子導航欄設計。如何更改Ionic 2中的標題欄/導航欄

我想實現的是當用戶滾動下來，我希望它變成一個標準的導航欄和用戶滾動頁面回到我的自定義背景

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

}

來源

2017-10-18 condo1234

您可以使用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你有條件使用就會爲您定製頭

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

您對非固定頭的問題是一樣的關於「開關」報頭中的第一個。但是，頁眉始終固定在頁面的頁面上，如果您在<ion-content>中使用它，則不會出現這種情況，但在您的情況下，因爲您只是想切換代碼的頁眉樣式。

希望這會有所幫助。

來源

2017-10-18 11:34:24

如何更改Ionic 2中的標題欄/導航欄

回答

相關問題