uniapp使用webview时刘海屏取消顶部导航的问题

记录uniapp的开发APP点滴。 用uniapp开发APP，有的手机是刘海屏时，当取消了顶部导航栏，会发现webview的内容会跑到状态栏等下面，和手机时间、手机信号等显示在一起，导致非常不美观。这时候该咋办呢？废话不啰嗦，上代码。

//1.我们拿到状态栏的高度，这个就是刘海屏显示时间、手机信号等地方的高度。
let statusBarHeight = parseInt(uni.getSystemInfoSync().statusBarHeight);

//2.获取当前的webview
let currentWebview = this.$scope.$getAppWebview();
//特别注意：此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()

//3.设置webview界面与顶部状态栏的高度 这里用一个延迟
setTimeout(function() {
    let wv = currentWebview.children()[0];
    wv.setStyle({ 
        top: statusBarHeight,//设置web-view距离顶部的距离以及自己的高度，单位为px
        bottom: 0 //值得注意的是，如果不把bottom设置为0，可能会与pages.json定义tabBar，产生一些问题，具体的代码效果，可以去除bottom:0，自行查看一下
    })
}, 1000);

好了经过这样的设置，webview的内容就不会挡住刘海屏了。希望对你有所帮助