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

【报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 - 天下无能第一

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

n***@qq.com

n***@qq.com

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

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

要回复问题请先登录注册