ionic3沉浸式状态栏及首页变化导航栏

谁借莪１个温暖的怀抱￠ 2022-01-17 01:57 429阅读 0赞

状态栏参考文章：链接: [https://www.jianshu.com/p/1ca5609f69d8][https_www.jianshu.com_p_1ca5609f69d8].

## 要实现的效果如下 ##

*  APP内容填充到状态栏下，状态栏字体颜色变成黑色
 *  滚动过程中导航栏由透明变成白色，导航栏里的字体颜色相应跟着改变。  
    ![在这里插入图片描述][20190612172224270.gif]

## 实现步骤 ##

**导航栏**  
①首先绑定滚动监听事件

<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>
        </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"));
                }
            });

**这里将状态栏的背景颜色设置成透明色**  
![在这里插入图片描述][20190612174156494.png]  
**这里设置状态栏的字体颜色**  
![在这里插入图片描述][20190612175123856.png]  
以上设置就可以将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/ 官网介绍  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvcGUyMDE3_size_16_color_FFFFFF_t_70]

[https_www.jianshu.com_p_1ca5609f69d8]: https://www.jianshu.com/p/1ca5609f69d8
[20190612172224270.gif]: /images/20220117/258e8c8832974d358406824ac0af732a.png
[20190612174156494.png]: /images/20220117/adc8f7460bc74be9aea5829f7ef5ac5e.png
[20190612175123856.png]: /images/20220117/7f42c257470e402d800775f872534cdd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvcGUyMDE3_size_16_color_FFFFFF_t_70]: /images/20220117/a5dce8fbd28546db8707ea0b31192fee.png