uni-app nvue下使用plus.webview创建Webview窗口样式设置失效

uni-app nvue下使用plus.webview创建Webview窗口样式设置失效

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：Alpha

HBuilderX版本号：3.2.14

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：vivo

手机机型：V1813BT

页面类型：nvue

vue版本：vue2

打包方式：云端

示例代码：

let webStyle = {  
    plusrequire:'ahead',   
    backButtonAutoControl:'none',   
    'uni-app': 'none',   
    top:'150px',  
    bottom: '100px',  
    softinputNavBar:'none',  
    //窗口加载错误时跳转的页面地址  
    errorPage:'/hybrid/html/error.html'  
}  
viewWapObj = plus.webview.create('','app_H5_view', webStyle);

操作步骤：

创建窗口，设置样式 top值 bottom值 高度需自动 ，加载网页后可以看到设置这些无效，之前正常

预期结果：

plus.webview创建Webview窗口，希望 top，left，bottom，right 设置能和之前正常

实际结果：

plus.webview创建Webview窗口样式设置无效




## bug描述：
plus.webview创建Webview窗口，top，left，bottom，right 设置无效之前正常

更多关于uni-app nvue下使用plus.webview创建Webview窗口样式设置失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请使用hx3.2.15试下

更多关于uni-app nvue下使用plus.webview创建Webview窗口样式设置失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


3.2.15已正常

在nvue页面中使用plus.webview创建Webview窗口时，样式设置失效通常是由于nvue页面的渲染机制与普通vue页面不同导致的。以下是可能的原因和解决方案：

  1. nvue页面渲染机制：nvue页面采用原生渲染，而plus.webview创建的Webview窗口是原生组件。在Android平台上，原生组件的层级关系可能导致样式设置被覆盖或忽略。

  2. 样式设置时机：确保在页面加载完成后（如onReady生命周期）再创建Webview窗口，避免样式未生效。

  3. 使用position属性：在样式对象中显式设置position为absolute或fixed，例如：

    let webStyle = {
    position: 'absolute',
    top: '150px',
    bottom: '100px',
    left: '0px',
    right: '0px',
    // 其他样式
}
回到顶部