青弦墨韵
青弦墨韵
  • 发布:2022-06-25 11:03
  • 更新:2022-09-29 13:14
  • 阅读:517

【报Bug】去除导航栏后web-view中的输入框弹出输入法会导致顶部多出一个状态栏的高度

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

手机系统: Android

手机系统版本号: Android 8.0

手机厂商: 华为

手机机型: Mate10

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://svn.lanzouj.com/iyK4206wvigj

示例代码:

page.json的代码

{  
    "pages": [{  
        "path": "pages/index/index",  
        "style": {  
            "app-plus": {  
                "titleNView": false, //不显示导航栏  
                "statusbar": {  
                    "background": "#fff"  
                }  
            }  
        }  
    }],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "APP",  
        "navigationBarBackgroundColor": "#fff",  
        "backgroundColor": "#fff",  
        "app-plus": {  
            "background": "#fff"  
        }  
    }  
}  

index.vue的代码

<template>  
    <div class="container">  
        <iframe :src="url" class="webView"></iframe>  
    </div>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                url: 'https://sobut.cn/test.html'  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    * {  
        box-sizing: border-box;  
    }  
    html, body {  
        width: 100%;  
        height: 100%;  
        padding: 0;  
        margin: 0;  
        overflow: hidden;  
    }  
    .container {  
        width: 100%;  
        height: 100%;  
        position: relative;  
        padding-top: var(--status-bar-height);  
    }  
    .webView {  
        width: 100%;  
        height: 100%;  
        padding: 0;  
        margin: 0;  
        border: none;  
    }  
    uni-page-wrapper, uni-page-body {  
        width: 100%;  
        height: 100%;  
        padding: 0;  
        margin: 0;  
    }  
</style>  

操作步骤:

代码已经贴上了,初始化uni-app项目后,修改page.json和index.vue的代码,打包,即可复现。

预期结果:

web-view中input框弹出输入法时不再多出一个状态栏的高度

实际结果:

web-view中input框弹出输入法时多出了一个状态栏的高度

bug描述:

我的项目结构很简单,就是uni-app上面用web-view或者iframe链接了一个h5的地址,然后就打包发布。

当去除原生导航栏,即设置了titleNView为false,
index.vue页面结构只有一个web-view且链接了H5的线上地址,
当这个H5页面里有input输入框时,在手机端点击输入框弹出输入法后,页面顶端会多出一个状态栏的高度。(如果没有出现就关闭输入法再重新弹一次),此bug必现,摸索了好久都无法解决,希望官方修复一下或者给出解决方案。

注:不去除导航栏的情况下不会有此问题,但因为我不需要这个导航栏。

2022-06-25 11:03 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

添加一下沉浸式状态栏试试
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar下添加immersed节点并设置值为true

"plus": {    
    "statusbar": {    
        "immersed": true    
    }    
}
青弦墨韵

青弦墨韵 (作者)

提交bug都没有人理吗

1***@qq.com

1***@qq.com - 天下无能第一

同楼主一样,每次必复现,没有人解决吗???

叶仲平

叶仲平

HB 3.6.4
H5APP 也有同样的问题。经反复测试发现首页开了沉浸式状态栏,启动时正常,输入法出现后状态栏变为系统默认的灰色,收起输入法状态栏确没有恢复,仍然是系统默认的灰色并且此时整个页面下移了状态栏的高度。相当于沉浸式状态栏失效了。

状态栏无法恢复时 console.log('immerse:'+plus.navigator.isImmersedStatusbar()); 也为true

该问题目前已经被锁定, 无法添加新回复