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

问题描述：

我有一个自定义的< 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); 

}

答

您可以使用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>中使用它，则不会出现这种情况，但在您的情况下，因为您只是想切换代码的页眉样式。

希望这会有所帮助。

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

相关推荐