uni-app ios键盘收起后页面消失

图片的顺序是2-3-1

在使用 uni-app 开发 iOS 应用时，可能会遇到键盘收起后页面内容消失或布局错乱的问题。这通常是由于 iOS 系统在处理键盘弹出和收起时，对页面布局的调整导致的。以下是一些常见的解决方案：

1. 使用 page.json 配置

在 page.json 中，可以通过配置 "softinputMode": "adjustResize" 来调整键盘弹出时的页面布局。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "softinputMode": "adjustResize"
      }
    }
  ]
}

2. 使用 uni.onKeyboardHeightChange 监听键盘高度变化

通过监听键盘高度的变化，手动调整页面布局。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  if (keyboardHeight > 0) {
    // 键盘弹出时，调整页面布局
  } else {
    // 键盘收起时，恢复页面布局
  }
});

3. 使用 scroll-view 包裹页面内容

将页面内容包裹在 scroll-view 中，可以避免键盘弹出时页面内容被挤压或消失。

<scroll-view scroll-y="true" style="height: 100vh;">
  <!-- 页面内容 -->
</scroll-view>

4. 使用 uni.setNavigationBarTitle 动态设置导航栏标题

在某些情况下，键盘收起后页面内容消失可能与导航栏的布局调整有关。可以通过动态设置导航栏标题来避免这个问题。

uni.setNavigationBarTitle({
  title: '页面标题'
});

5. 使用 uni.pageScrollTo 滚动页面

在键盘收起后，手动滚动页面到指定位置，确保页面内容可见。

uni.pageScrollTo({
  scrollTop: 0,
  duration: 300
});

6. 使用 uni.hideKeyboard 手动隐藏键盘

在某些情况下，手动隐藏键盘可以避免页面布局错乱。

uni.hideKeyboard();

7. 使用 uni.getSystemInfo 获取系统信息

通过获取系统信息，了解当前设备的屏幕高度和键盘高度，从而调整页面布局。

uni.getSystemInfo({
  success(res) {
    const screenHeight = res.screenHeight;
    const windowHeight = res.windowHeight;
    const keyboardHeight = screenHeight - windowHeight;
    // 根据键盘高度调整页面布局
  }
});

8. 使用 uni.createSelectorQuery 获取元素位置

通过获取页面元素的位置信息，手动调整页面布局。

const query = uni.createSelectorQuery().in(this);
query.select('#elementId').boundingClientRect(data => {
  const elementTop = data.top;
  // 根据元素位置调整页面布局
}).exec();

9. 使用 uni.setStorageSync 保存页面状态

在键盘弹出时保存页面状态，键盘收起时恢复页面状态。

uni.setStorageSync('pageState', { scrollTop: 100 });
const pageState = uni.getStorageSync('pageState');

10. 使用 uni.reLaunch 重新加载页面

在极端情况下，可以通过重新加载页面来恢复页面布局。

uni.reLaunch({
  url: '/pages/index/index'
});