PowerJohn
PowerJohn
  • 发布:2022-07-20 10:26
  • 更新:2022-08-05 16:03
  • 阅读:314

【报Bug】uni-app web-view(没有导航栏,全屏打开)打开的h5 webapp 底部多出一块,页面占用不到满屏

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: 苹果X

页面类型: vue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

步骤1. 随便写一个h5页面,设置页面的宽100%,高100%,放在服务器上

步骤2. 在uni-app内部,打开一个去导航栏的web-view页面,web-view的地址指向 步骤1的页面地址

步骤3.在IOS手机 苹果X上(自定义基座)运行,打开对应的web-view页面,即可复现此问题,如果一开始是好的,反复杀死app重新进入。

预期结果:

希望h5能占满全屏

实际结果:

底部多出一块,页面占用不到满屏

bug描述:

web-view组件,打开服务器上的h5 webapp的时候,底部无法铺满。底部的高度大约和隐藏的导航条的高度差不多,感觉是顶部导航条的问题导致的,但是我们不想要顶部对的导航条。所以,就造成了底部出现灰色留白的问题。

附件中的图片我是在论坛中找的一个同样问题的图片,这个问题没有从uni-app层面处理好,给出的应急解决是在h5 的webapp中设置html、body的高度为100vh。

之前我们使用过h5+的方式,这种方式打开对应的h5 webapp是没问题的,所以,希望官方可以在uni-app层面能解决这个问题。

2022-07-20 10:26 负责人:DCloud_UNI_WZF 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

webview 使用组件方式 还是 js创建(plus.webview.create)

  • PowerJohn (作者)

    使用的组件形式 <web-view></web-view>

    2022-07-21 10:08

  • DCloud_UNI_WZF

    组件形式可通过动态设置 style 临时处理该问题


    const currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象  
    setTimeout(function() {
    const wv = currentWebview.children()[0]
    wv.setStyle({contentAdjust:false})
    }, 1000); //如果是页面初始化调用时,需要延时一下

    后续会在组件层面修复

    2022-07-21 11:23

  • PowerJohn (作者)

    回复 DCloud_UNI_WZF: 好的,非常感谢

    2022-07-22 09:57

PowerJohn

PowerJohn (作者) - i am john

已解决,一开始设置的时候,可能会出现不起作用的情况,如果这种情况出现,删除APP重新搞一个新的。
解决方案如下:

// mounted 生命周期内调用  
formmatWebView() {  
                this.$nextTick(() => {  
                    const currentWebview = this.$scope.$getAppWebview();  
                    this.timer && clearTimeout(this.timer);  
                    this.timer = setTimeout(() => {  
                        const wv = currentWebview.children()[0];  
                        if (wv) {  
                            console.log("--------调整web-view视口高度----------");  
                            wv.setStyle({ contentAdjust: false });  
                            console.log(wv.getStyle());  
                        } else {  
                            this.time = this.time - 1;  
                            if (this.time > 0) { this.formmatWebView(); }  
                        }  
                    }, 100);  
                });  
            }
DCloud_UNI_WZF

DCloud_UNI_WZF

HBuilderX3.5.4-alpha已修复

  • PowerJohn (作者)

    非常感谢

    2022-09-05 14:25

要回复问题请先登录注册