当键盘出现在Ionic应用程序中时,将离子标题固定到页面顶部

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);             
}

尽管所有这些事情似乎都没有保持标题固定到位.

我在下面添加了我chat.html和chat.tsGitHib Gists 的完整代码:

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

Answer 1

当键盘出现时，运行js函数。这样做时，请给标题留出负边距。

前任：

function myFunction() { document.getElementById("myDiv").style.marginBottom = "-15px"; }

资料来源：https ://www.w3schools.com/jsref/prop_style_marginbottom.asp

可能有更有效的解决方案，但如果position:fixed不起作用，这是我能想到的最好的解决方案。