uniapp + h5开发app自定义导航栏高度适配问题

创建uniapp项目后通过web-view将h5页面嵌入到app中，此刻的uniapp项目相当于一个壳子，所有内容都在h5页面中，通过手机模拟器看到的页面如下：

uniapp有自带的头部，h5页面自定义了头部，考虑到页面结构，将原生的导航去掉

在pages.json中写入以下代码，因取消掉全部的原生导航，所以代码写到globalStyle中：

"app-plus":{
    "titleNView":false
}

取消掉的原生导航如图所示，自定义导航占据了设备高度（电量，时间...显示的位置）

 

 参考了大部分代码，腾出设备高度的代码基本上是在代码中加入如下代码：

<view class="status_bar" style="height: var(--status-bar-height); ">
</view>
// height: var(--status-bar-height); 自动匹配各个手机端的高度

但入口h5页面的文件中有web-view，对他设置高度边距不起作用，在这篇文章中提到可以通过设置web-view距离顶部的距离以及自己的高度的方法解决高度的问题

 

 

var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
            uni.getSystemInfo({
                //成功获取的回调函数，返回值为系统信息
                success: (sysinfo) => {
                    height = sysinfo.windowHeight - 40; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种，如果不减，页面会下沉，看不到底部导航栏
                },
                complete: () => {}
            });
            var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
            setTimeout(function() {
                var wv = currentWebview.children()[0];
                wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
                    top:40 , //此处是距离顶部的高度，应该是你页面的头部
                    height:  height , //webview的高度
                    scalable: false, //webview的页面是否可以缩放，双指放大缩小,
                })
            }, 500); //如页面初始化调用需要写延迟

查看页面效果

 参考博客：

https://blog.csdn.net/qq_31676483/article/details/116300240