ionic html5 select / keypad open, прокрутите вид и вкладку вверх и создайте пустое место после вкладки на iOS - PullRequest
Новая
       10

ionic html5 select / keypad open, прокрутите вид и вкладку вверх и создайте пустое место после вкладки на iOS

0 голосов
/ 15 мая 2018

Я использую ionic v1 с angularJS, и у меня есть вкладки ion: 

<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>

Когда открывается меню выбора,представление прокручивается вверх и создает пустое пространство под ion-tabs.

Как я могу переместить представление в исходное положение, как до открытия меню выбора?

1 Ответ

0 голосов
/ 18 мая 2018

Наконец, я смог найти одно временное решение, оно все еще имеет небольшую проблему.Чтобы решить ее, я делаю следующее:

Первый: В 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);
}
...