Задержка ионной клавиатуры при отображении — при скрытии в большом HTML-документе

#android #cordova #ionic-framework

#Android #кордова #ionic-framework

Вопрос:

У меня есть html-страница с очень большой книгой с большой вертикальной прокруткой.

Когда я открываю ввод для ввода текста, клавиатуре требуется много времени, чтобы появиться и написать, кажется, что когда я открываю и закрываю клавиатуру, ionic изменяет размер области просмотра, пересчитывая положение всей книги, вызывая чрезмерную задержку.

Есть ли у кого-нибудь решение для этого или источник, которому я могу следовать?

[Ионный, Кордова]

Ответ №1:

Удалите «ion-content» и используйте «ion-scroll». может быть, это поможет вам.

Вы можете найти более подробную информацию по этой ссылке; http://ionicframework.com/docs/api/directive/ionScroll /

Комментарии:

1. Ваш ответ технически верен, я изменил ионный контент с помощью ионной прокрутки, но не решил проблему задержки.

Ответ №2:

Вы можете решить эту проблему, отключив прокрутку при открытии клавиатуры. Плагин клавиатуры Ionic позволяет указать, должна ли клавиатура появляться над содержимым или прокручивать страницу, чтобы разместить новый, меньший видовой экран. Чтобы выполнить это, вот несколько шагов для Ionic v2, но вы также можете использовать этот плагин для проектов Ionic v1.

Отключить прокрутку клавиатуры

  1. Установка плагина Добавьте плагин клавиатуры в свое приложение Ionic. Вам не обязательно использовать CLI, но я лично считаю, что так проще всего.

     $ ionic plugin add ionic-plugin-keyboard
    $ npm install --save @ionic-native/keyboard
      
  2. Добавьте в файл плагин импорта в ваш app.component.ts файл. Этот файл должен быть расположен под src/app/app.components.ts . Добавьте параметр импорта в верхней части файла с другим import синтаксисом.

     import { Keyboard } from '@ionic-native/keyboard';
      

    Вам также нужно будет добавить Keyboard в свой список поставщиков в разделе @Component . Вот как это должно выглядеть после его добавления:

     @Component({
      templateUrl: 'app.html',
      providers: [
        Keyboard
      ]
    })
      

    Обратите внимание, что это происходит в app.component.ts файле, а не в .ts файле для конкретной страницы, поведение которой вы хотите настроить.

  3. Отключить прокрутку В классе, определенном в app.component.ts файле, должна быть вызвана функция initializeApp() , которая может содержать другие настройки, такие как скрытие экрана тайника и настройка стиля строки состояния. Добавьте строку ниже внутри this.platform.ready().then() обратного вызова.

     this.keyboard.disableScroll(true);
      

    Теперь ваша initializeApp функция должна выглядеть примерно так:

     initializeApp() {
      this.platform.ready().then(() => {
        this.keyboard.disableScroll(true);
      });
    }
      

Обратите внимание, что если вы используете <ion-searchbar> вместо <input> , кажется, что есть некоторые действия, которые заставляют Ionic изменять размер контейнера, что приводит к появлению пустого пространства в верхней или нижней части приложения. Это может произойти при использовании кнопки отмены <ion-searchbar> или при нажатии на некоторые другие нестандартные ионные элементы.

Комментарии:

1. как бороться с этими пробелами?