Нижний колонтитул Ionic 3 расположен над клавиатурой в мобильных устройствах - PullRequest
Новая
       9

Нижний колонтитул Ionic 3 расположен над клавиатурой в мобильных устройствах

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

Я новичок в ионике.У меня есть приложение следующим образом

home.ts 

<ion-header>
  <ion-toolbar>
    <ion-title>Headdddder</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" value=""></ion-input>
    </ion-item>
  </ion-list>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

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

В моем app.ts мой код выглядит следующим образом 

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, keyboard: Keyboard) {
    platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

1 Ответ

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

Первый: запуск sudo cordova plugin add ionic-plugin-keyboard из каталога проекта.

Второй: Затем отключите прокрутку клавиатуры с помощью кода: 

keyboard.disableScroll(true);

Окончательный код TS будет: 

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, keyboard: Keyboard) {
    platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      keyboard.disableScroll(true);

    });
  }
}
...