100792057@qq.com
100792057@qq.com
  • 发布:2021-02-09 13:49
  • 更新:2021-02-09 14:02
  • 阅读:27

【报Bug】软键盘隐藏后导致高度变得更高了,底部元素消失不见

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.2

手机系统: Android

手机系统版本号: Android 10

手机厂商: vivo

手机机型: iqoo

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<view> <!-- app height: 100vh  或 h5 height: calc(100vh - 88rpx); -->  
  <view></view> <!-- height: 90%  -->  
  <view></view> <!-- height: 10%  -->  
</view>

操作步骤:

1.配置顶部导航栏搜索框

2.页面结构

<view> <!-- app height: 100vh  或 h5 height: calc(100vh - 88rpx); -->  
  <view></view> <!-- height: 90%  -->  
  <view></view> <!-- height: 10%  -->  
</view>

3.手机端点击搜索框,隐藏搜索框

4.第一个子元素变高,第二个子元素被挤压出屏幕外

预期结果:

第二个子元素不被输入法顶起,输入法消失后第二个子元素依然在底部

实际结果:

输入法顶起了第二个子元素,

bug描述:

使用了顶部导航栏搜索框,没有使用底部导航栏
APP端给父容器100vh,两个子容器分别为85%高度的可上下滚动列表容器和15%高度的容器,成功占满一页高度(此时windowHeight:708)
当顶部搜索框获得焦点唤起输入法后第二个子元素会被顶起,但是基本全被输入法遮挡(从输入法中文键盘模式下输入任意内容,第二个子元素的内容会出现在输入法上方,不会被遮挡),此时windowHeight:489
然后关闭输入法,windowHeight变成了780而不是预想的708
同时导致了我第二个子容器不见了(好像是跑到屏幕下方外边去了,而且页面也没有因为高度变高了让父容器也产生可滚动)
试过了网上很多办法,比如修改softinputMode,根据高度变化隐藏或显示第二个子容器,第二个子容器使用或不适用定位等等,但都没有效果,毕竟问题是输入法隐藏后100vh的高度从708变成了780
请问有什么解决办法嘛

2021-02-09 13:49 负责人:无 分享
已邀请:
DCMarvel

DCMarvel

此问题很早就有了,我们的解决办法是app打开的时候就获取到设备的屏幕高度并保存到全局,其他页面调用此高度,即使后续在变也不会影响

要回复问题请先登录注册