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.ts的完整代码添加到以下GitHib Gists中：

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

Answer 1

您尝试过使用吗？

<ion-content fullscreen><ion-content>

我目前正在使用Ionic 4，并且在键盘打开时标题仍然看起来不错

我具有以下结构

<ion-header no-border>
    <ion-toolbar>        
        <ion-fab-button>
            <ion-icon name="ios-arrow-back"></ion-icon>
        </ion-fab-button>             
        <ion-title></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content fullscreen>        
    ......
</ion-content>

<ion-footer no-border>  
    ......
</ion-footer>

Answer 2

出现键盘时，运行js函数。这样做时，请给页眉设置负边距。

例如：

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

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

也许有更有效的解决方案，但是如果position：fixed不起作用，这是我能提出的最佳解决方案。

Answer 3

您可以在离子标题下使用离子项目分隔器，例如

<ion-header>
  <ion-item-divider sticky>
    <!-- Content -->
  </ion-item-divider>
</ion-header>

粘性属性，用于将标题固定在顶部

Answer 4

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

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

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

4 个答案: