uniapp web-view调整修改高度设置

web-view默认占全屏,怎么处理自定义高度,实现如下:

javascript 复制代码
<view class="myCardNav">
      <!-- 状态栏占位符 -->
      <uni-nav-bar height="125rpx" border="false" left-icon="left" leftWidth="130rpx" statusBar fixed rightWidth="130rpx"
        @clickLeft="onLeftBack">
        <block slot="default">
          <view class="title">视频监控</view>
        </block>
      </uni-nav-bar>
    </view>
 
    <web-view style="margin-top: 125rpx; background-color: #fff" :webview-styles="webviewStyles"
      :src="urlType"></web-view>

data数据:

javascript 复制代码
<script>
	export default {
		data() {
			return {
				urlType: null,
                webviewStyles: {
                    progress: {
                      color: "#FF3333"
                    }
                },
			};
		},
	};
</script>

核心代码:

javascript 复制代码
 onLoad(options) {
    
    // #ifdef APP-PLUS
    let height = 0; //定义动态的高度变量
    let statusbar = 0; // 动态状态栏高度
    uni.getSystemInfo({
      // 获取当前设备的具体信息
      success: sysinfo => {
        statusbar = sysinfo.statusBarHeight;
        height = sysinfo.windowHeight;
      }
    });
    let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
    setTimeout(function () {
      var wv = currentWebview.children()[0];
      wv.setStyle({
        //设置web-view距离顶部的距离以及自己的高度,单位为px
        top: statusbar + uni.upx2px(125), //此处是距离顶部的高度,应该是你页面的头部
        height: height - statusbar - uni.upx2px(125), //webview的高度
        scalable: false, //webview的页面是否可以缩放,双指放大缩小,
      });
    }, 200); //如页面初始化调用需要写延迟
    // #endif
  },
相关推荐
ai小鬼头15 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's22 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.1 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端