uni-app 更新3.2.14-alpha后web-view高度未计算系统导航栏高度

uni-app 更新3.2.14-alpha后web-view高度未计算系统导航栏高度

开发环境 版本号 项目创建方式
Windows win7 HBuilderX
Android Android 11 小米 redMin k20pro

示例代码：

<template>
<view>
<web-view :src="url" :webview-styles="viewStyle"></web-view>
</view>
</template>

操作步骤：

  • web-view打开h5

预期结果：

  • 正常计算系统导航栏高度

实际结果：

  • 未正确计算web-view高度

bug描述：

web-view组件打开h5，头部未计算系统导航栏高度，导致web-view高度不对，底部出现空白

image


更多关于uni-app 更新3.2.14-alpha后web-view高度未计算系统导航栏高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 更新3.2.14-alpha后web-view高度未计算系统导航栏高度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 3.2.14-alpha版本中，web-view组件确实存在未正确计算系统导航栏高度的问题，导致底部出现空白。这通常是由于web-view组件在计算高度时未包含系统导航栏（如虚拟按键栏）的高度。

解决方案：

  1. 手动设置web-view高度：可以通过计算屏幕可用高度来动态设置web-view的样式。例如：

    export default {
  data() {
    return {
      viewStyle: {
        height: (uni.getSystemInfoSync().windowHeight) + 'px'
      }
    }
  }
}

    注意：uni.getSystemInfoSync().windowHeight返回的是去除状态栏和导航栏后的可用高度，但需确保页面布局未受其他元素影响。

  2. 使用CSS适配：在web-view的容器上设置height: 100vh，但需注意vh单位可能包含系统导航栏高度，导致滚动问题。建议结合calc()函数调整：

    web-view {
  height: calc(100vh - env(safe-area-inset-bottom));
}
回到顶部