uni-app套web-view之后如何留出statusbar_webview顶部状态栏保留-CSDN博客

本文链接：https://blog.csdn.net/weixin_38576764/article/details/119935592

本文介绍了如何在uni-app中通过JS编程方式设置`navigationStyle`为`custom`，并使页面内容不填充整个屏幕，保留statusBar的高度。在`onLoad`函数中创建了一个新的webview，并设置了其高度为屏幕高度减去statusBar高度，然后将其添加到当前页面中，确保页面布局正确。这种方法适用于不使用CSS调整，且需要在APP-PLUS环境下运行的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果设了"navigationStyle" : "custom"会自动充满全部屏幕，现在，如果想在页面上面腾出statusBar高度，该怎么做？

不要使用css，而是使用JS编程方式。

必须使用APP-PLUS。

<template>
    <view>
    </view>
</template>



    export default {
        onLoad() {
            // #ifdef APP-PLUS
            var wv = plus.webview.create("http://xxx", "custom-webview", {
                plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
                'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
                top: uni.getSystemInfoSync().statusBarHeight ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
                height: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight
            })
            var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
            currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
            // #endif
        }
    }