ionic html5 选择/键盘打开，向上滚动视图和选项卡并在 iOS 上的选项卡后创建空白空间

【问题标题】：ionic html5 select/keypad open, scroll the view and tab to upward and create empty space after tab on iOSionic html5 选择/键盘打开，向上滚动视图和选项卡并在 iOS 上的选项卡后创建空白空间
【发布时间】：2018-10-24 18:41:57
【问题描述】：

我正在使用带有 angularJS 的 ionic v1，并且我有离子标签：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Home Tab -->
  <ion-tab icon-off="ion-home" icon-on="ion-home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>

  <!-- Calendar Tab -->
  <ion-tab icon-off="ion-calendar" icon-on="ion-calendar" href="#/tab/calendar">
    <ion-nav-view name="tab-calendar"></ion-nav-view>
  </ion-tab>
</ion-tabs>

在日历选项卡中，我有 html 选项如下：

<select ng-options="x for x in $ctrl.startTimes"></select>

When the select menu opens, the view scroll to upward and creates empty space under ion-tabs.

如何在选择菜单打开之前将视图移动到初始位置？

【问题讨论】：

标签： javascript ios angularjs html ionic-v1

【解决方案1】：

最后，我找到了一种解决方法，它仍然存在一些小问题。为了解决它，我执行以下操作：

首先：在 app.js 中我禁用滚动如下：

if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.disableScroll(true);

}

第二：注册键盘隐藏事件，当键盘或选择控件关闭时会触发keyboardHideHandler：

window.addEventListener('native.keyboardhide', keyboardHideHandler);

第三：如下实现keyboardHideHandler。实施后所有问题仅在第一次发生，因此您必须使用标志isFirstTimeEdit：

var isFirstTimeEdit = true; 
function keyboardHideHandler(e){
      if(isFirstTimeEdit) {
        isFirstTimeEdit = false;

        if(window.scrollY >= 20) {
          document.body.style.marginTop = "20px";
        }
      }
      window.removeEventListener('native.keyboardshow', keyboardShowHandler);
}

【讨论】：