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

橙子_tong

已于 2024-04-11 14:07:05 修改

阅读量7.8k

点赞数 2

文章标签： uni-app javascript web-view

于 2023-10-09 11:33:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42220533/article/details/133698021

版权

文章介绍了如何在uni-app中使用web-view时，实现头部添加自定义返回导航并动态调整web-view的高度，以适应状态栏和屏幕尺寸。核心内容包括设置uni-nav-bar和web-view的样式，以及获取系统信息动态计算高度。

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

web-view默认是占全屏，需求想要在头部添加一个返回导航。实现如下：

界面如下：

<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:

urlType: null,
      webviewStyles: {
        progress: {
          color: "#FF3333"
        }
      },

核心处理：

 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
  },

如此，便可以实现APP端web-view高度设置；