uni-app 输入框点击后键盘会遮住输入框 页面没有滚动

uni-app 输入框点击后键盘会遮住输入框 页面没有滚动

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 w10
HBuilderX 正式
HBuilderX版本号 3.1.6
手机系统 Android
手机版本号 Android 8.1
手机厂商 小米
手机机型 小米9
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<input type="text" v-model="request_data.cg_form.cg_name" placeholder="请输入货物名称" />

预期结果：

<input type="text" v-model="request_data.cg_form.cg_name" placeholder="请输入货物名称" />

实际结果：

<input type="text" v-model="request_data.cg_form.cg_name" placeholder="请输入货物名称" />

bug描述：

输入框点击后，键盘抬起后经常出现页面不滚动，导致键盘会遮住输入框，望修复，谢谢！


更多关于uni-app 输入框点击后键盘会遮住输入框 页面没有滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 输入框点击后键盘会遮住输入框 页面没有滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个在uni-app开发中常见的Android平台兼容性问题。当软键盘弹出时，页面未能自动调整滚动位置导致输入框被遮挡。

解决方案：

  1. 使用uni.pageScrollTo手动控制滚动
onFocus() {
  setTimeout(() => {
    uni.pageScrollTo({
      scrollTop: 目标位置,
      duration: 300
    });
  }, 200);
}
  1. 配置pages.json的软键盘行为
{
  "path": "页面路径",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}

  1. 对于固定定位元素 如果页面有position: fixed的元素，建议改为flex布局，避免影响页面滚动计算。

  2. 使用uni-app官方组件 考虑使用<uni-easyinput>等官方组件，它们对键盘弹起有更好的兼容性处理。

  3. Android特有配置 在manifest.json中配置：

"app-plus": {
  "softinput": {
    "mode": "adjustResize"
  }
}
回到顶部