鍵盤出現時隱藏頁腳 - IONIC2

Question

我想在鍵盤出現時隱藏Ionic2中的頁腳，我搜索了所有論壇但沒有找到正確的解決方案。

這是我的頁腳 -

<ion-footer>
  <div class="footer1" >
      <p>You don't have account? <span [navPush]="pushPage"> Register here</span></p>
  </div>
</ion-footer>

Answer 1

@ Und3rTow的答案是對的，謝謝。 但是真的不需要布爾值：

keyboardCheck() {
 return !this.keyboard.isOpen();
}

HTML：

<ion-footer *ngIf="keyboardCheck()">
 ...
</ion-footer>

你甚至可以避免這個功能：

<ion-footer *ngIf="!keyboard.isOpen()">
 ...
</ion-footer>

Answer 2

您應該可以使用離子鍵盤API ，更具體地說，使用isOpen()方法 - 沿着這些行應該有效：

export class MyClass {

  showFooter: boolean = true;

  constructor(public keyboard: Keyboard) {

  }

  keyboardCheck() {
    if (this.keyboard.isOpen()) {
        // You logic goes here
        this.showFooter = false;
    }
  }
}

在您的HTML中，您可以使用ngIf ：

<ion-footer *ngIf="showFooter">
  <div class="footer1" >
      <p>You don't have account? <span [navPush]="pushPage"> Register here</span></p>
  </div>
</ion-footer>

---

感謝@sebaferreras指出您可能需要調用resize()以告知內容在動態添加頁眉/頁腳時重新計算其尺寸。

Answer 3

我有類似的問題。

現在我不太確定我使用的是哪個鍵盤插件，但你可以嘗試這個： https : //ionicframework.com/docs/v2/native/keyboard/

確保首先安裝插件，然后在app.scss文件中添加以下行：

 body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}

body.keyboard-is-open .fixed-content {
  margin-bottom: 0 !important;
}

body.keyboard-is-open .applyFooter{
        display: none;
        bottom: 0;
}

注意：我在頁腳中有一個類class =“applyFooter”

<ion-footer class="applyFooter">
</ion-footer>

Answer 4

這是我根據@Chizitere的答案為所有屏幕解決的問題

1. 安裝： https ： 0000-00-00ionicframework.com/docs/v2/native/keyboard/

2. app.component.ts

    this.platform.ready().then(() => { //... this.keyboard.onKeyboardShow().subscribe(() => { document.body.classList.add('keyboard-is-open'); }); this.keyboard.onKeyboardHide().subscribe(() => { document.body.classList.remove('keyboard-is-open'); }); }); 

3. app.scss

    body.keyboard-is-open ion-footer { display: none; }