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/ 官网介绍