键盘出现离子时隐藏页脚答案

【问题标题】：Hide footer when keyboard appear ionic键盘出现离子时隐藏页脚
【发布时间】：2016-04-15 03:13:06
【问题描述】：

我在特定页面中遇到了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 中添加以下行来解决此问题。隐藏页脚后，出现了闪烁的问题。有没有其他方法可以在键盘出现时隐藏页脚？请帮助我。谢谢。

谢谢

【问题讨论】：

标签： html css angularjs ionic-framework

【解决方案1】：

有"hide-on-keyboard-open" 类可以用于此类事情

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

看看ionic keyboard plugin

【讨论】：

【解决方案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 规则就可以了。

【讨论】：