Question

我在特定页面中遇到footer-bar的问题。当输入聚焦时，键盘出现，页脚停留在键盘上方。

HTML

<ion-view>
    <ion-content>
        <!-- Content goes here -->
    </ion-content>
    <div class="bar dash-footer-col dash-footer bar-footer">
        <div class="row">
            <div class="col dash-footer-col mycharts-footer-col footertopredboarder" <img src="img/icons/1.png" ng-click="go('home')">
                <div>
                    <h5>HOME</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder " ng-click="go('profile')">
                <img src="img/icons/2.png">
                <div>
                    <h5>PROFILE</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" style="padding-top:0px;" ng-click="go('contact')">
                <img class="weather-icon" src="img/icons/3.png">
                <div style="height:1em;">
                    <h5>CONTACT</h5>
                </div>
            </div>
            <div class="col dash-footer-col mycharts-footer-col footer-top-boarder" ng-click="go('logout')">
                <img src="img/icons/4.png">
                <div>
                    <h5>LOGOUT</h5>
                </div>
            </div>
        </div>
    </div>
</ion-view>

我尝试通过在app.js中添加以下行来解决此问题。页脚隐藏后，但有一个闪烁的问题。当键盘出现时，还有其他方法可以隐藏页脚吗？请帮帮我。谢谢。

由于

Answer 1

您可以使用类"hide-on-keyboard-open"进行此类操作

<div class="hide-on-keyboard-open">

查看ionic keyboard plugin

Answer 2

 window.addEventListener('native.keyboardshow', function(){
        document.body.classList.add('keyboard-openC');
    });

 window.addEventListener('native.keyboardhide', function(){
        document.body.classList.remove('keyboard-openC');
    });

你可以尝试这个（在run（）上）。您只需添加正确的css规则即可。

键盘出现离子时隐藏页脚

2 个答案: