uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡
uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| 操作系统版本 | win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.2.3 |
| 手机系统 | 全部 |
| 页面类型 | nvue |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
测试过的手机:
鸿蒙2.0.0
示例代码:
page/index/index.vue 首页代码
<template>
<view>
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
page/index/bottombar/subNvue.nvue subNvue代码
<template>
<div class="page">
<span class="text">绿色为subNvue区域</span>
<input type="text" placeholder="请输入" @focus="focus()" @blur="blur()" />
</div>
</template>
<script>
export default {
data() {
return {};
},
onLoad() {},
methods: {
focus() {
uni.getSubNVueById("bottombar").setStyle({ height: "500px" })
},
blur() {
uni.getSubNVueById("bottombar").setStyle({ height: "200px" })
}
}
}
</script>
<style lang="scss">
.page {
background-color: #4CD964;
}
</style>
pages.json 配置文件
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"app-plus": {
"subNVues": [{
"id": "bottombar",
"path": "pages/index/bottombar/bottombar",
"style": {
"position": "dock",
"dock": "bottom",
"bottom:": "100px",
"width": "100%",
"height": "200px"
}
}]
}
}
}, {
"path": "pages/test/test",
"style": {
"navigationBarTitleText": "test"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
操作步骤:
点击输入框弹出输入法,触发 focus 事件,focus 事件设置 subNvue 高度
input 失去焦点时,还原 subNvue 高度
预期结果:
subNvue 高度正常调整
实际结果:
subNvue调整时,里面的 文本 和 输入框 都消失了
bug描述:
在andoroid app 中,subNvue 原生子窗体中的 input 标签的 cursor-spacing 属性无法使用,即输入法弹出时,输入法无法正常顶起 input 输入框,导致输入框被遮挡。
故采取手动调整 subNvue 高度的策略,方法如下:监听 input 获得焦点事件 focus,调整 subNvue 高度,监听 input 失去焦点事件 blur,还原subNvue高度。但是调用 subNvue 的 setStyle 方法调整 height 高度时,subNvue 的内容被遮挡住了。
另外,当通过输入法返回触发 input 失去焦点 blur 事件,和通过点击主页面(非subNvue)触发 input 失去焦点 blur 事件。页面被遮挡的表现形式也不同。

附件
更多关于uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡的实战教程也可以访问 https://www.itying.com/category-93-b0.html
管理员能看一下吗
更多关于uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡的实战教程也可以访问 https://www.itying.com/category-93-b0.html
管理员能看一下吗
管理员能看一下吗
我的思路,用 uni.preload 加载一个页面, 页面里面通过 uni.$on 和 uni.$emit 做数据事件通信。可以规避你这个问题,使用起来和 subnvue 没大区别 。我 app 里面做评论组件的时候,就是这个思路,点击的时候,唤起已经 preload 的页面,把数据传递过去,这种思路可以实现全局弹窗、全局组件等,可以通过 v-if 和 uni.$emit 传递类型控制要显示的组件
用subNvue的起因是,要做一个自定义tabbar,但是页面包含video,
回复 3***@qq.com: 你在自定义tabbar 里面还加了 input 或 textarea ?感觉怪怪的输入框的顶起,如果adjust-size设置无效的话,考虑用 uni.onKeyboardHeight 监听键盘高度,别用 textarea 上的那个高度事件,实际测试2个事件差500ms 左右
回复 青阳_1900: 就算不监视focus、blur事件,不调用 subNvue 的 .setStyle 方法,如果通过点击pages/index/index.vue 页面的任何地方(注意不是subNvue 子窗体) ,subNvue 子窗体内的内容都会被遮挡。
管理员能看一下吗
没用的 官方根本不回信息 我前几个星期也提了你这个问题 这个问题 就是IOS可以监听软键盘弹出获取高度动态改变input的高度 但是安卓不能用 我提了BUG 到现在没人解决
管理员能看一下吗
难受
这个问题是由于在Android平台,subNvue原生子窗体在输入法弹出时调整高度,触发了系统对输入法窗口的重新布局,导致subNvue内容被遮挡。
核心原因是:Android系统在输入法弹出时,会调整窗口布局,而subNvue作为原生子窗体,其内容区域在高度调整后可能没有正确重绘。
解决方案:
-
使用
cursor-spacing属性(推荐): 在input标签上添加cursor-spacing属性,设置合适的间距值,让输入法自动顶起输入框:<input type="text" placeholder="请输入" cursor-spacing="20" />这个属性在最新版本的uni-app中应该已经修复,请确保HBuilderX和基座都是最新版本。
-
延迟调整高度: 如果必须手动调整高度,可以添加延迟来避免布局冲突:
focus() { setTimeout(() => { uni.getSubNVueById("bottombar").setStyle({ height: "500px" }) }, 100) }, blur() { setTimeout(() => { uni.getSubNVueById("bottombar").setStyle({ height: "200px" }) }, 100) } -
使用
resize事件监听: 监听窗口大小变化,在布局稳定后再调整:let resizeTimer = null focus() { if (resizeTimer) clearTimeout(resizeTimer) resizeTimer = setTimeout(() => { uni.getSubNVueById("bottombar").setStyle({ height: "500px" }) }, 300) }

