Ionic中键盘弹出时页面上滑的实现需求

1. 页面布局结构 #

搭建基础登录界面，用容器包裹输入框和按钮，通过布局实现初始居中：

<ion-content class="login-content">
  <div class="login-container">
    <ion-input placeholder="用户名" type="text"></ion-input>
    <ion-input placeholder="密码" type="password"></ion-input>
    <ion-button expand="block" class="login-btn">登录</ion-button>
  </div>
</ion-content>

2. 基础样式设置 #

通过CSS flex布局实现输入区垂直水平居中：

.login-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

.login-container {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

3. 监听键盘事件动态调整布局 #

利用Ionic/Capacitor的键盘API，监听键盘弹出/收起事件，动态调整内容位置，确保输入区始终在可视区域中央：

方案一：Ionic Angular（使用@ionic-native/keyboard）

1. 安装插件：

npm install @ionic-native/keyboard @ionic-native/core

2. 在组件中监听键盘事件：

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

constructor(private keyboard: Keyboard, private platform: Platform) {}

ngOnInit() {
  this.platform.ready().then(() => {
    // 键盘弹出时设置底部间距
    this.keyboard.onKeyboardShow().subscribe(event => {
      document.querySelector('.login-content')?.style.setProperty('--keyboard-height', `${event.keyboardHeight}px`);
    });

    // 键盘收起时移除间距
    this.keyboard.onKeyboardHide().subscribe(() => {
      document.querySelector('.login-content')?.style.removeProperty('--keyboard-height');
    });
  });
}

方案二：Capacitor（Vue/React通用）

1. 安装依赖：

npm install @capacitor/keyboard
npx cap sync

2. 监听键盘事件：

import { Keyboard } from '@capacitor/keyboard';

// 监听键盘弹出
Keyboard.addListener('keyboardWillShow', info => {
  document.querySelector('.login-content')?.style.setProperty('--keyboard-height', `${info.keyboardHeight}px`);
});

// 监听键盘收起
Keyboard.addListener('keyboardWillHide', () => {
  document.querySelector('.login-content')?.style.removeProperty('--keyboard-height');
});

3. 更新CSS，加入动态间距变量：

.login-content {
  /* 保留原有样式 */
  padding-bottom: var(--keyboard-height, 0);
}

4. 额外优化：全局键盘配置 #

在Capacitor配置文件中设置键盘调整策略，增强适配效果：

// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'YourApp',
  webDir: 'www',
  plugins: {
    Keyboard: {
      resize: 'body', // 自动调整body高度适配键盘
      style: 'dark'
    }
  }
};

export default config;

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