如何固定Ionic 3应用中Footer的位置？解决键盘弹出上移问题

我之前做Ionic3项目时也碰到过这个烦人的问题，试了几个靠谱的方法，分享给你：

1. 从插件配置入手，阻止页面自动调整 #

Ionic3默认依赖cordova-plugin-ionic-keyboard处理键盘交互，我们可以在config.xml里直接配置禁止键盘调整页面布局：

<!-- 在config.xml的<widget>标签内添加以下偏好设置 -->
<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="none" />

这两个配置会告诉键盘插件，弹出时不要改动页面的布局结构，从根源上避免Footer被顶上去。

2. 给Footer添加固定定位的CSS兜底 #

有时候光靠插件配置可能因为布局嵌套问题没生效，这时候给Footer加个强一点的CSS样式就能搞定：

/* 可以放在页面的SCSS文件或者全局样式文件里 */
ion-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10; /* 确保Footer不会被内容或者键盘遮挡 */
}

这样不管页面怎么滚动、键盘怎么弹，Footer都会牢牢钉在视口底部。

3. 监听键盘事件手动控制（特殊场景备用） #

如果上面两个方法都没解决你的问题，那可以通过监听键盘的弹出/收起事件来手动调整样式，灵活性更高：
首先在页面的TS文件里导入Keyboard模块并添加监听：

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

constructor(private keyboard: Keyboard) {}

ionViewDidLoad() {
  // 键盘弹出时给body加标识类
  this.keyboard.onKeyboardShow().subscribe(() => {
    document.body.classList.add('keyboard-is-open');
  });

  // 键盘收起时移除标识类
  this.keyboard.onKeyboardHide().subscribe(() => {
    document.body.classList.remove('keyboard-is-open');
  });
}

然后对应的CSS：

body.keyboard-is-open ion-footer {
  position: fixed !important;
  bottom: 0 !important;
}

额外注意 #

确保你的页面结构是标准的Ionic布局，用ion-content包裹所有需要滚动的内容，Footer单独放在外面，这样布局本身就支持固定底部：

<ion-header>
  <!-- 头部内容 -->
</ion-header>

<ion-content>
  <!-- 这里放你的输入框和其他滚动内容 -->
</ion-content>

<ion-footer>
  <!-- 固定底部的Footer内容 -->
</ion-footer>

内容的提问来源于stack exchange，提问作者GAURAV