Ionic3 iOS端实现键盘上推视图避免Footer被遮挡的方案咨询

嘿，我之前在Ionic 3里碰到过一模一样的iOS键盘遮挡Footer的问题，给你分享几个实测有效的方法，其中第一个就和Android的adjustResize逻辑很像：

方法一：利用Ionic键盘插件的原生resize配置 #

这是最省心的方案，和Android的adjustResize原理类似，让系统自动调整WebView的大小来避开键盘。

1. 确保已经安装适配Ionic 3的键盘插件版本：

cordova plugin add cordova-plugin-ionic-keyboard@2.2.0

2. 在项目根目录的config.xml里添加以下配置：

<!-- 开启键盘resize功能 -->
<preference name="KeyboardResize" value="true" />
<!-- 使用原生模式，让系统负责调整视图 -->
<preference name="KeyboardResizeMode" value="native" />

配置完成后重新编译iOS项目，键盘弹出时整个页面会自动上推，Footer就不会被遮挡了。

方法二：手动监听键盘事件调整页面样式 #

如果上面的配置没生效（偶尔会有插件兼容性问题），可以手动监听键盘的显示/隐藏事件，动态调整页面底部的padding或者Footer的位置：

1. 在app.component.ts里引入键盘插件并添加监听：

import { Keyboard } from '@ionic-native/keyboard';
import { Platform } from 'ionic-angular';

constructor(private keyboard: Keyboard, private platform: Platform) {
  this.platform.ready().then(() => {
    // 监听键盘弹出事件
    this.keyboard.onKeyboardShow().subscribe(event => {
      // 给页面body添加底部padding，高度等于键盘高度
      document.body.style.paddingBottom = `${event.keyboardHeight}px`;
      // 如果你的Footer是固定定位的，也可以直接调整它的bottom值
      // document.querySelector('ion-footer').style.bottom = `${event.keyboardHeight}px`;
    });

    // 监听键盘隐藏事件，恢复样式
    this.keyboard.onKeyboardHide().subscribe(() => {
      document.body.style.paddingBottom = '0';
      // document.querySelector('ion-footer').style.bottom = '0';
    });
  });
}

方法三：检查Ionic滚动辅助配置 #

确保Ionic的滚动辅助功能开启，避免输入框被键盘遮挡的同时，也能配合视图调整：
在config.xml里添加：

<preference name="ScrollAssist" value="true" />
<preference name="AutoFocusAssist" value="true" />

这个配置会让输入框自动滚动到可视区域，和前面的resize配置配合使用效果更好。

内容的提问来源于stack exchange，提问作者Alston Sahyun Kim