Ionic 2에서 머리글/탐색 모음을 변경하는 방법

Question

기울임 꼴 모양을 만드는 CSS 클립 경로가있는 사용자 정의 < ion-header> 배경 디자인이 있습니다. 사용법이 페이지 아래로 스크롤 될 때 navbar를 표준 ionic nav bar 디자인으로 변경할 수 있기를 원합니다.

내가 달성하고자하는 것은 내가 내 사용자 정의 배경을 다시

<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

ionic-angular에서 Content으로이를 수행 할 수 있습니다.

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> 

을 사용자 정의 할 수 있습니다 클래스를 사용합니다 : 그래서 .TS이 파일이 필요합니다 매번 당신이

<ion-scroll (ionScroll)="checkIfTop()"> 
    ... 
</ion-scroll> 

비 고정 된 헤더에 대한 귀하의 질문은 "전환"헤더에 대한 첫 번째와 동일한 스크롤하여 이온 함량 함수를 실행하기에 스크롤 이벤트를 추가해야합니다. 그러나 헤더는 항상 페이지의 tp로 고정되어 있으므로 <ion-content> 내부에서 사용하면 안되지만 코드가 작동 할 헤더 스타일을 전환하고 싶으므로 사용자의 경우에 사용하십시오.

희망이 도움이됩니다.