用web-view打开网页遮住了手机状态栏

分类：uni-app

uniapp

因为在pages.json中用"titleNView": false关闭了标题栏，在页面中使用web-view打开网页就会覆盖手机的状态栏，有什么办法可以不让它覆盖吗？页面中的代码如下：

<template>  
  <view>  

        <view>  
            <web-view :webview-styles="webviewStyles"  src="https://www.baidu.com"></web-view>  
        </view>  
  </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
                //iStatusBarHeight:0,  
                webviewStyles:{  
                    progress: {  
                        color: '#ff3333'  
                    }  
                }              
        }  
    },  
    methods: {  

    }  
}  
</script>

2019-12-26 23:53 负责人:无分享

6 个回复

旺仔牛奶 - 一定要开心呀~

自己写一个透明的系统栏高度的view占位就好了

今天回复我了吗

写在哪里,APP中写不了把

2019-12-27 10:51

c***@163.com (作者)

下面是全部代码，使用了占位，但打开网页就没有用了，如果不使用<web-view>标签是有用的。不知道我这样写代码有没有问题？

<template>  
  <view>  
        <!-- #ifdef APP-PLUS -->    
        <view class="status_bar">    
            <view class="top_view"></view>    
        </view>    
        <!-- #endif -->   
        <view>  
            <web-view :webview-styles="webviewStyles"  src="https://www.baidu.com"></web-view>  
        </view>  
  </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
                //iStatusBarHeight:0,  
                webviewStyles:{  
                    progress: {  
                        color: '#ff3333'  
                    }  
                }              
        }  
    },  
    methods: {  

    }  
}  
</script>  

<style>  
.status_bar {    
    height: var(--status-bar-height);    
    width: 100%;    
    background-color: #FF0000;    
}    
.top_view {    
    height: var(--status-bar-height);    
    width: 100%;    
    position: fixed;    
    background-color: #FF0000;    
    top: 0;    
    z-index: 999;    
}  

</style>