uni-app webview遮挡第一屏正常文本流

uni-app webview遮挡第一屏正常文本流

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：
uniapp/App

PC开发环境操作系统：
Windows

HBuilderX类型：
正式

HBuilderX版本号：
3.1.4

手机系统：
Android

手机系统版本号：
Android 7.1.1

手机厂商：
模拟器

手机机型：
夜神默认

页面类型：
vue

打包方式：
云端

bug描述：
使用的官方dome中pages/API/subnvue/subnvue 页面做的测试
具体请看附件

img

操作步骤：
请看附件

预期结果：
请看附件

实际结果：
请看附件


更多关于uni-app webview遮挡第一屏正常文本流的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app webview遮挡第一屏正常文本流的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，webview组件默认会覆盖在普通页面内容之上，这是由原生渲染层级决定的。当webview位于页面顶部时，会遮挡其他文本内容。

解决方案：

  1. 使用subNVue子窗体替代普通webview，通过position:static或调整marginTop控制布局
  2. 在页面onLoad时通过plus.webview.create创建webview并动态计算位置
  3. 为webview容器设置固定高度，并确保上方保留足够的文本显示空间

关键代码示例（方案2）：

onLoad() {
  const currentWebview = this.$scope.$getAppWebview()
  const wv = plus.webview.create('https://example.com', 'webview', {
    top: '100px', // 根据实际需求调整位置
    height: 'calc(100% - 100px)'
  })
  currentWebview.append(wv)
}
回到顶部