当键盘出现时隐藏页脚-IONIC2

Question

我希望在Ionic2中隐藏底部栏当键盘出现，我搜索了所有论坛但都没有找到正确的解决方案。

这是我的底部栏 -

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

- Aditya Kumar

Answer 1

@Und3rTow的回答非常正确，谢谢。但是实际上并不需要布尔值：

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

HTML:

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

你甚至可以避免使用那个函数：

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

- Héctor Bordajandi

Answer 2

您应该能够使用Ionic 键盘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()来告知内容重新计算其尺寸。

- Michael Doye

---

+1（我也是这么想的哈哈）。请注意，当添加/删除页眉/页脚时，您可能需要调用内容实例的resize()方法，否则页脚将被隐藏，但空间不会用于_content_（文档）。 - sebaferreras

@sebaferreras 谢谢！已经添加到帖子中了。如有需要，可以继续添加。 - Michael Doye

对我来说看起来完美 :) - sebaferreras

无法工作，没有任何反应，分享我的代码，请看一下 - JS- https://jpst.it/VoQx HTML- https://jpst.it/VoQO请帮助和指导我走向正确的方向 @sebaferreras - Aditya Kumar

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>

- Chizitere

---

当我现在尝试这些指令时，插件似乎没有自动添加“keyboard-is-open”类。 - marcovtwout

Answer 4

这是我根据@Chizitere的答案解决所有屏幕问题的方法

1. 安装：https://ionicframework.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;
   }
   

- marcovtwout

---

当我使用这个时，我的应用程序编译成一个白屏。 - Mike Axle

也许你没有正确安装模块，请检查控制台日志是否有错误。 - marcovtwout