uni-app 软键盘隐藏后导致高度变得更高了，底部元素消失不见

uni-app 软键盘隐藏后导致高度变得更高了，底部元素消失不见

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：Android

手机系统版本号：Android 10

手机厂商：vivo

手机机型：iqoo

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：

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

操作步骤：

  1. 配置顶部导航栏搜索框
  2. 页面结构
    <view> <!-- app height: 100vh  或 h5 height: calc(100vh - 88rpx); -->  
  <view><!-- height: 90%  --></view>  
  <view><!-- height: 10%  --></view>  
</view>

更多关于uni-app 软键盘隐藏后导致高度变得更高了，底部元素消失不见的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

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

更多关于uni-app 软键盘隐藏后导致高度变得更高了，底部元素消失不见的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的Android软键盘弹起导致布局错乱的问题。主要原因是在Android上，软键盘弹出时会压缩窗口高度，但收起后有时不会正确恢复。

解决方案有以下几种：

  1. 使用manifest.json配置：
{
  "app-plus": {
    "softinputMode": "adjustResize"
  }
}
  1. 改用flex布局替代百分比：
<view style="display: flex; flex-direction: column; height: 100vh;">
  <view style="flex: 9;"></view>
  <view style="flex: 1;"></view>
</view>
  1. 监听键盘事件手动调整：
onShow() {
  uni.onKeyboardHeightChange(res => {
    if(res.height === 0) {
      // 键盘收起时强制重绘
      this.$forceUpdate()
    }
  })
}
  1. 对于固定底部元素，可以使用position: fixed：
.bottom-view {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 10%;
}
回到顶部