ionic（6）：实现手机上头部沉浸式效果

1. 目标效果： 目标效果
2. 实现前效果： 目前效果
3. 实现方法：
   a. 安装插件：

$ ionic cordova plugin add cordova-plugin-statusbar
$ npm install --save @ionic-native/status-bar

b. 使用（注：别忘了app.module.ts也要import）

import { StatusBar } from '@ionic-native/status-bar';
 
constructor(private statusBar: StatusBar) {
    //沉浸式并且悬浮透明
    this.statusBar.overlaysWebView(true);
}

需要注意的是这段代码添加在哪里，我放在第一个页面（我的是登陆页），然后就实现沉浸式效果，后面的页面也同样有这样的效果，我在官方文档中没有看到说这段代码放在哪个页面还是说每个页面都需要这段代码，但是放在系统进入后的首个页面，即可实现。

4. 实现了头部的沉浸式效果（记得在手机上调试，我没有找到在chrome上测试这个的方法，必须真机器，如果有人发现可以在Chrome上调试真机的方法，请告诉我），但是有个问题是，我之前所有的页面的头部都需要额外多给20px(一般手机的头部都是20px吧，未具体考证！)，那么我需要在每个页面去修改页面的头部尺寸么，其实这么做就可以了：在公共样式variables.css中添加下面的代码给头部添加了20px，个别不是用ionic的头部样式的页面，具体再修改一下就可以了

//增加20px实现沉浸式
//Androif
.toolbar-md {
    min-height: 67px !important;//47px的头部改成67px
}
ion-title {
    padding-top: 20px;//标题向上留20px
}
.back-button.show-back-button {
    padding-top: 20px;//返回箭头下降20px
}
//iOS头部加20px
.toolbar-ios {
    min-height: 66px !important;
}
.toolbar-ios ion-title {
    padding: 20px 90px 1px !important;
}

5. 参考文档：Ionic4沉浸式状态栏透明悬浮 https://blog.csdn.net/qq_31384551/article/details/82222944

官方文档： https://ionicframework.com/docs/native/status-bar/

有问题欢迎与我交流，一起学习，企鹅：1216078547