uniapp：webview全屏不显示导航栏解决方案

dingcho

已于 2025-01-01 00:37:00 修改

阅读量647

点赞数 1

分类专栏：前端文章标签： uni-app

于 2025-01-01 00:34:54 首次发布

本文链接：https://blog.csdn.net/yao_guai/article/details/144860032

版权

前端专栏收录该内容

165 篇文章

订阅专栏

<template>
	<view class="index">
		 <u-navbar :is-back="true" title="测试"" :title-width="650"></u-navbar>
		 <web-view :src="webSrc"></web-view>
	 </view>
 </template>
 <script>

export default {
  name: "index",
  data() {
    return {
      navHeight: 0,
      webSrc: "",
    };
  },
  onLoad() {

    // APP-PLUS 才会启用
    // #ifdef APP-PLUS
    var that = this;
    var height = 0; 
    var statusBarHeight = 0;
    uni.getSystemInfo({
      success: (sysinfo) => {
        that.navHeight = 44; 
        height =
          sysinfo.windowHeight - that.navHeight - sysinfo.statusBarHeight;
        statusBarHeight = sysinfo.statusBarHeight;
      },
      complete: () => {},
    });

    var currentWebview = this.$scope.$getAppWebview(); 
    setTimeout(function () {
      var wv = currentWebview.children()[0];
      wv.setStyle({
        top: that.navHeight + statusBarHeight,
        height: height,
      });
    }, 1000); 
    // #endif
  }
};
</script>