uni-app 原生子窗体配合web-view使用问题：当web-view中的输入框弹出底部键盘时，原生子窗体消失

操作步骤：

web-view中的输入框点击调出底部的输入键盘，键盘关闭后原生子窗体不见了

预期结果：

原生子窗体依然在的

实际结果：

原生子窗体不见，使用的是dock方法放在底部

bug描述：

原生子窗体，配合web-view使用，当web-view中的输入框弹出调起底部键盘时，原生子窗体居然消失了！（安桌条件下）


| 信息类别         | 信息内容                   |
|------------------|----------------------------|
| 产品分类         | uniapp/App                 |
| PC开发环境       | Windows                    |
| PC开发环境版本   | 1                          |
| HBuilderX类型    | 正式                       |
| HBuilderX版本    | 3.8.12                     |
| 手机系统         | Android                    |
| 手机系统版本     | Android 11                 |
| 手机厂商         | 华为                       |
| 手机机型         | 1                          |
| 页面类型         | vue                        |
| vue版本          | vue2                       |
| 打包方式         | 云端                       |
| 项目创建方式     | HBuilderX                  |

yuanlaile 1楼•10 天前

在 uni-app 中，当使用原生子窗体（如 subNVue）与 web-view 组件结合时，可能会遇到在 web-view 中输入框弹出键盘时，原生子窗体消失的问题。这是因为在 iOS 和 Android 平台上，键盘弹出时会触发页面的布局变化，导致原生子窗体被重新布局或隐藏。

解决方案

1. 使用 `subNVue` 的 `position` 属性

通过设置 subNVue 的 position 属性为 static 或 absolute，可以避免子窗体在键盘弹出时被重新布局。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "subNVue": [
          {
            "id": "mySubNVue",
            "path": "pages/subNVue/subNVue",
            "position": "absolute", // 或者 "static"
            "style": {
              "width": "100%",
              "height": "100%",
              "background": "transparent"
            }
          }
        ]
      }
    }
  ]
}

2. 监听键盘事件并调整子窗体位置

通过监听键盘的弹出和收起事件，动态调整子窗体的位置，确保它不会被键盘遮挡或隐藏。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  if (keyboardHeight > 0) {
    // 键盘弹出时，调整子窗体的位置
    const subNVue = uni.getSubNVueById('mySubNVue');
    subNVue.setStyle({
      bottom: keyboardHeight + 'px'
    });
  } else {
    // 键盘收起时，恢复子窗体的位置
    const subNVue = uni.getSubNVueById('mySubNVue');
    subNVue.setStyle({
      bottom: '0px'
    });
  }
});

3. 使用 `web-view` 的 `adjust-position` 属性

在 web-view 组件中，设置 adjust-position 属性为 false，可以防止页面在键盘弹出时自动调整位置。

<web-view src="https://example.com" :adjust-position="false"></web-view>

4. 使用 `input` 组件的 `adjust-position` 属性

如果 web-view 中的输入框是原生 input 组件，可以设置 adjust-position 属性为 false，防止页面在键盘弹出时自动调整位置。

<input type="text" :adjust-position="false" />