uniapp中webview全屏不表现导航栏办理方案

uniapp官网文档地址：https://uniapp.dcloud.net.cn/api/window/window.html#getappwebview

1. <template>
2.         <view class="index">
3.                  <u-navbar :is-back="true" title="标题"" :title-width="650"></u-navbar>
4.                  <web-view :src="webSrc"></web-view>
5.          </view>
6. </template>
7. <script>
9. export default {
10.   name: "index",
11.   data() {
12.     return {
13.       navHeight: 0, // 初始化 navHeight
14.       webSrc: "",
15.     };
16.   },
17.   onLoad() {
18.     // #ifdef APP-PLUS
19.     var that = this;
20.     var height = 0; // 定义动态的高度变量
21.     var statusBarHeight = 0;
22.     uni.getSystemInfo({
23.       // 成功获取的回调函数，返回值为系统信息
24.       success: (sysinfo) => {
25.         that.navHeight = 44; // 假设导航栏高度为 44px，你可以根据实际情况调整
26.         height =
27.           sysinfo.windowHeight - that.navHeight - sysinfo.statusBarHeight; // 自行修改，自己需要的高度
28.         statusBarHeight = sysinfo.statusBarHeight;
29.       },
30.       complete: () => {},
31.     });
33.     var currentWebview = this.$scope.$getAppWebview(); // 获取当前 web-view
35.     setTimeout(function () {
36.       var wv = currentWebview.children()[0];
37.       wv.setStyle({
38.         // 设置 web-view 距离顶部的距离以及自己的高度，单位为 px
39.         top: that.navHeight + statusBarHeight,
40.         height: height,
41.       });
42.     }, 500); // 如页面初始化调用需要写延迟
43.     // #endif
44.   }
45. };
46. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。