我使用 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
但仍然没有修复。
最佳答案
在您的 login.ts 文件中添加以下内容:
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);
});
}
还有另一种解决方案:
打开 config.xml 文件并在 platform name="android"标记中添加以下行:
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity"> <activity windowSoftInputMode="adjustPan" /></edit-config>
...the rest of the android configs...
</platform>
关于javascript - ionic 固定内容在底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48057244/