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

你应该能够使用离子Keyboard 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

的答案为所有屏幕解决的问题

安装：https://ionicframework.com/docs/v2/native/keyboard/

app.component.ts

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {


        print("tapped on cell")


        if let cell = tableView.cellForRow(at: indexPath) as? NumericInputTableViewCell{
            print("Tapped on numericcell")
        } else if let cell = tableView.cellForRow(at: indexPath) as? BooleanInputTableViewCell {
            print("Tapped on booleancell")
        }

    }

app.scss

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

键盘出现时隐藏页脚 - IONIC2

4 个答案: