<view> <!-- app height: 100vh 或 h5 height: calc(100vh - 88rpx); -->
<view></view> <!-- height: 90% -->
<view></view> <!-- height: 10% -->
</view>
1***@qq.com
- 发布：2021-02-09 13:49
- 更新：2021-02-09 14:02
- 阅读：543
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 3.1.2
手机系统： Android
手机系统版本号： Android 10
手机厂商： vivo
手机机型： iqoo
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
1.配置顶部导航栏搜索框
2.页面结构
<view> <!-- app height: 100vh 或 h5 height: calc(100vh - 88rpx); -->
<view></view> <!-- height: 90% -->
<view></view> <!-- height: 10% -->
</view>
3.手机端点击搜索框，隐藏搜索框
4.第一个子元素变高，第二个子元素被挤压出屏幕外
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
请问有什么解决办法嘛
1 个回复
DCMarvel
此问题很早就有了,我们的解决办法是app打开的时候就获取到设备的屏幕高度并保存到全局,其他页面调用此高度,即使后续在变也不会影响