安卓端页面中使用 webview，非 webview 部分为什么会出现黑色透明样式

分类：uni-app

Android uniapp Webview

效果如图所示，如何默认去掉黑色透明部分，现在需要用户点击才会消失

test.vue

<script setup>  
 const { proxy } = getCurrentInstance()  

// webview 实例  
let appWebview  

const appWebviewSrc = ref('')  

onReady(() => {  
  setTimeout(async () => {  
    appWebview = proxy.$getAppWebview().children()[0]  
    appWebview.setStyle({  
      top: 'xxx',  
      height: 'xxx',  
    })  

    appWebviewSrc.value = 'https://xxxx.com'  
  }, 600)  
})  
</script>  

<template>  
  <view class="main">  
    <navbar />  
    <web-view :src="appWebviewSrc" />  
  </view>  
</template>

2025-07-28 14:38 负责人:无分享

2 个回复

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

提供完整单页面源码，说明操作步骤。你的 navbar 组件是如何编写的。第一张图和第二张图分别说明什么。

第一张图的黑色，看起来是 UI 组件设置的遮罩。

1***@163.com (作者)

@DCloud_UNI_OttoJi
出现黑色透明层，安卓系统，没有使用三方UI组件，概率出现

最小代码复现：

<script setup>    
 const { proxy } = getCurrentInstance()    

// webview 实例    
let appWebview    

const appWebviewSrc = ref('')    

onReady(() => {    
  setTimeout(async () => {    
    // 延迟确保实例已加载  
    appWebview = proxy.$getAppWebview().children()[0]    
    // webview动态定位，测试时固定值  
    appWebview.setStyle({    
      top: '88px',    
      height: '600px',  
    })    
    // 加载url  
    appWebviewSrc.value = 'https://xxxx.com'    
  }, 600)    
})    
</script>    

<template>    
  <view style="width: 100vw; height: 100vh">    
    <view style="height: 88px">  
      <view>安卓顶部状态栏占位，测试固定</view>  
    </view>  
    <web-view :src="appWebviewSrc" />    
  </view>    
</template>

要回复问题请先登录或注册

安卓端页面中使用 webview，非 webview 部分为什么会出现黑色透明样式

2 个回复

公告

相关问题

安卓端页面中使用 webview，非 webview 部分为什么会出现黑色透明样式

与内容相关的链接

2 个回复

公告

相关问题