ionic3沉浸式狀態欄及首頁變化導航欄

狀態欄參考文章：鏈接: https://www.jianshu.com/p/1ca5609f69d8.

要實現的效果如下

• APP內容填充到狀態欄下，狀態欄字體顏色變成黑色
• 滾動過程中導航欄由透明變成白色，導航欄裏的字體顏色相應跟着改變。
  

實現步驟

導航欄
①首先綁定滾動監聽事件

<ion-header no-border style="padding-top: 0">
    <div class="head-top" #head>
        <div class="dv1" #dv1 (click)="OpenMessage()">
            <img #img1 src="assets/imgs/commit2.png" width="15" height="15">
        </div>
        <div class="dv2" (click)="OpenSearch()">
            <span><img #img3 src="assets/imgs/search1.png" width="15" height="15"></span>
            <input #input type="text" readonly placeholder="搜大師，問題" [ngClass]="state? 'input1': 'input'">
        </div>
        <div class="dv1" style="width: 14px;height: 14px;background: transparent">
            <!-- <div class="dv1" #dv3 (click)="OpenModel()"> -->
            <!-- <img #img2 src="assets/imgs/calander2.png" width="14" height="14"> -->
        </div>
    </div>
</ion-header>

<ion-content fullscreen class="home-body" (ionScroll)="scrollToTop($event)">

②距離頂部44像素高度的時候切換樣式，這裏可以直接切換css類名，懶得寫了

scrollToTop(event) {
    if(event.scrollTop >= 44)
    {
        this.head.nativeElement.style.background = "white";
        this.dv1.nativeElement.style.background = "rgba(0, 0, 0, 0.08)";
        this.dv3.nativeElement.style.background = "rgba(0, 0, 0, 0.08)";
        this.img1.nativeElement.src = "../../assets/imgs/commit1.png";
        this.img2.nativeElement.src = "../../assets/imgs/calander1.png";
        this.img3.nativeElement.src = "../../assets/imgs/search.png";
        this.input.nativeElement.className = "input1";
    }
    else
    {
        this.head.nativeElement.style.background = "transparent";
        this.dv1.nativeElement.style.background = "rgba(0, 0, 0, 0.4)";
        this.dv3.nativeElement.style.background = "rgba(0, 0, 0, 0.4)";
        this.img1.nativeElement.src = "../../assets/imgs/commit2.png";
        this.img2.nativeElement.src = "../../assets/imgs/calander2.png";
        this.img3.nativeElement.src = "../../assets/imgs/search1.png";
        this.input.nativeElement.className = "input";
    }
}

@ViewChild('img1') public img1;
@ViewChild('img2') public img2;
@ViewChild('img3') public img3;
@ViewChild('dv1') public dv1;
@ViewChild('dv3') public dv3;
@ViewChild('head') public head;
@ViewChild('input') public input;

本來想用flag爲true或false切換類名的，結果發現那樣實踐過後樣式變化很遲鈍。

狀態欄

this.cordova.getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially
                // by the Cordova.
                Window window = cordova.getActivity().getWindow();
                //start
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
                window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
                // 狀態欄字體設置爲深色
                window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
                window.setStatusBarColor(Color.TRANSPARENT);
                window.setNavigationBarColor(Color.TRANSPARENT);
                //end
                window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

                // Read 'StatusBarBackgroundColor' from config.xml, default is #000000.
                setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "transparent"));

                // Read 'StatusBarStyle' from config.xml, default is 'lightcontent'.
                setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));
            }
        });

這裏將狀態欄的背景顏色設置成透明色

這裏設置狀態欄的字體顏色

以上設置就可以將APP內容覆蓋到狀態欄了，但是導航欄的內容快和狀態欄的內容靠的很近，嚴重影響用戶體驗。

這個時候在app.scss設置一下ion-header的padding-top

ion-app {
    // 沉浸式狀態欄，設置header留出狀態欄的位置
    ion-header {
        padding-top: 25px;
    }
}

好了，完成了。
注： app.components.ts文件裏，下圖標註如果有的話也要去掉
https://ionicframework.com/docs/v3/native/status-bar/ 官網介紹