css - 当键盘出现在 Ionic 应用程序中时，将 ion-header 修复到页面顶部

Question

我有一个聊天应用程序，当我单击 textarea 开始输入新消息时，键盘会向上推送上面的所有内容。这意味着 ion-header 消失了。我希望它始终显示在屏幕顶部。

这是一个示例 GIF:https://i.imgur.com/a/GcmagJi

ion-header代码是:

<ion-header>

  <ion-navbar>
    <ion-buttons ion-fixed end>
      <button ion-button icon-only (click)="closeChat()">
        <ion-icon name="close-circle"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>

ion-footer代码是:

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-9>
        <textarea rows="3" [(ngModel)]="data.message" (keyup.enter)="sendMessage()" placeholder="Type your message ..."></textarea>
      </ion-col>
      <ion-col col-3>
          <button ion-button (click)="sendMessage()">Send</button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

在我的 app.module.ts 文件中，我使用了:

imports: [
  BrowserModule,
  LongPressModule,
  IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      scrollAssist: true,
      autoFocusAssist: false
    }
  ),
  IonicStorageModule.forRoot(),
  DragulaModule,
  HttpModule
]

在我的 chat.ts 中我有:

constructor(private keyboard: Keyboard) {
    this.keyboard.disableScroll(false);             
}

尽管有所有这些事情，似乎没有任何东西可以将 header 固定在适当的位置。

我已将我的 chat.html 和 chat.ts 的完整代码添加到下面的 GitHib Gists 中:

https://gist.github.com/christopherib/4b9e70590fb322bdc33ffbbe42d50685 https://gist.github.com/christopherib/cb3d234564c0feb1e8bf5b96f8d023c3

Answer 1

尝试在 platform.ready() 之后立即运行 keyboard.disableScroll(true)

或者尝试运行 keyboard.hideFormAccessoryBar(false);