Question

我已经使用ionic 3为我的应用创建了一个登录表单，当我切换键盘时，底部的内容移动到顶部。

这是我的键盘未切换时的屏幕设计。

切换键盘时。

我的html模型

<ion-content text-center class="login">

    <!--top-->
    <form [formGroup]="valForm" (submit)="OnLogin($event, valForm.value)">
    <div padding class="animated fadeIn center-On-Screen" ion-fixed>
        <img class="logo" src="assets/img/logo.png">
        <ion-list padding>
            <ion-item>
                <ion-input type="email" placeholder="E-mail"
                 class="form-control"  name="email" 
                 autocomplete="off" formControlName="email"
                required></ion-input>
            </ion-item>

            <ion-item>
                <ion-input type="password" placeholder="Password"
                 name="password" 
                formControlName="password" required=""></ion-input>
            </ion-item>
            <ion-item>
                <div class="forgotpass" item-right (click)="Forgotpass()">Forgot password</div>
            </ion-item>

        </ion-list>


    </div>
        <div class="signin-content btn-holder" ion-fixed>
            <div class=" animated bounceInUp">
                <button ion-button block outline color="light" type="submit" [disabled]="!valForm.valid">Sign In</button>

            </div>
        </div>
    </form>

    <!--footer-->
    <div class="footer-content btn-holder" ion-fixed>
        <div class=" animated bounceInUp">
            <button ion-button block color="facebook" (click)="doFbLogin()">Facebook</button>

        </div>
    </div> 
    <div class="footer-signup signup">
        <div class="animated bounceInUp">
            <a color="light" (click)="Register()">New Here?
                <strong>Sign Up</strong>
            </a>
        </div>
    </div>

用于定位的CSS。

.signin-content {
    position: fixed;
    bottom: 20%;
    width: 100%;
 }
.footer-content {
    position: fixed;
    bottom: 12%;
    width: 100%;
}
.signup-content{
    position: fixed;
    bottom: 10%;
    width: 100%; 
}

如何才能使内容保持在最底层。

我的开发环境。

cli packages: 

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 25.2.2
    ios-deploy        : 1.9.1 
    ios-sim           : https://registry.npmjs.org/ios-sim/-/ios-sim-5.0.12.tgz 
    Node              : v8.5.0
    npm               : 5.5.1 
    OS                : macOS High Sierra

已经通过此链接Ionic native keyboard以及下面编辑config.xml的解决方案尝试了此解决方案，但仍未修复。

Answer 1

在您的login.ts文件中添加以下内容：

<Domain Class>Service

还有另一个解决方案：

打开你的config.xml文件并在平台名称中添加以下行=＆＃34; android＆＃34;标记：

import { Keyboard } from 'ionic-native';
import { Platform } from 'ionic-angular';

constructor(public platform: Platform, public keyboard: Keyboard) {

}

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

离子固定内容在底部

1 个答案: