打开键盘时隐藏标签答案

【问题标题】：Hide tabs on keyboard open打开键盘时隐藏标签
【发布时间】：2017-09-30 01:48:07
【问题描述】：

我想在键盘打开时隐藏我的标签，并在键盘关闭时再次显示标签。

我知道我可以只使用“AdjustSpan”，仅此而已，但问题是如果我这样做，键盘也会隐藏我用于聊天的输入，因为它是页脚。

隐藏标签的最佳方法是什么？

我已经在 [ngClass] 中尝试过，我在 Keyboard.disableScroll 中尝试过，在 app.module.ts 中也尝试过，使用参数 scrollAssist 和 autoFocusAssist 且值为 false ...

似乎没有任何效果。

知道我应该如何隐藏标签吗？？

提前谢谢你！！

【问题讨论】：

标签： ionic-framework ionic2 ionic-tabs

【解决方案1】：

您可以通过编写一个订阅键盘事件的指令来实现这一点，然后在显示/隐藏键盘后向选项卡元素添加（隐藏）/删除（显示）一个 css 属性/类（显示：无）。

@Directive({
    selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
    private static CSS_CLASS_NAME = 'hide-tab-bar';

    private show: Subscription;
    private hide: Subscription;

    constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {

        platform.ready().then(() => {
            this.show = keyboard.onKeyboardShow().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
            );

            this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
            );
        });
    }

    ngOnDestroy(): void {
        if (this.hide !== undefined) {
            this.hide.unsubscribe();
        }
        if (this.show !== undefined) {
            this.show.unsubscribe();
        }
    }
}

在 app.scss 中添加 css 类（例如）：

.hide-tabs {
display: none;
}

在您的标签元素上<ion-tabs hideTabs> </ion-tabs>

**为概念验证添加代码

【讨论】：

【解决方案2】：

您必须为键盘交互添加一个事件监听器，以向 body-tag 添加（或删除）一些 css 类。在 ionic1 中，默认情况下从框架中添加了“hide-on-keyboard-open”类。在 ionic2 中，您必须走“自定义实现路径”。所以，这就是你要找的东西：

1) 按照 ionic2 文档中的说明安装键盘插件和 node_modules：

ionic plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

https://ionicframework.com/docs/native/keyboard/

2) 将插件添加到您的 app.modules.ts

3) 在 app.component.ts 的 device-ready 事件中添加所需的事件列表：

this.platform.ready().then(() => {

        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();

        this.keyboard.onKeyboardShow().subscribe(() => {
            document.body.classList.add('keyboard-is-open');
        });

        this.keyboard.onKeyboardHide().subscribe(() => {
            document.body.classList.remove('keyboard-is-open');
        });
})

4) 使用附加的类属性 (hideElementOnKeyboardShown) 将类定义添加到您的 app.scss

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

5) 将类添加到所需的元素，例如页脚、div 或其他：

<ion-footer class="hideElementOnKeyboardShown">
    <button round ion-button (click)="onLogin()"  block>
        <ion-icon name="logo-facebook" padding></ion-icon>
            Login
    </button>
</ion-footer>

6) 在这种情况下，将 ion-footer 标签放在 content-tag 中，否则在显示键盘时计算的 viewheight 不正确。

祝你有美好的一天！

【讨论】：

【解决方案3】：

只需将以下行添加到您的 config.xml..

 <platform name="android">

<preference name="android- 
      manifest/application/activity/@android:windowSoftInputMode" 
   value="adjustPan" />

....
</platform>

这样做是修改 Cordova 写入 AndroidManifest.xml 的默认值，以控制应用的全局键盘输入行为。

【讨论】：