Question

大家，我正在使用离子版本3但是我正在设计一个用户将注册的页面。

如果内容不适合屏幕，页面会滚动，问题是目前每当我在Android设备上打开键盘时，整个内容部分都会向上移动，并且即使没有内容，也会继续滚动？我发布了我的代码。

我的register-user.html代码

<ion-header>
<ion-navbar hideBackButton color="title">
    <ion-title text-center>Register</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="content">
    <ion-grid>
        <ion-row>
          <ion-col col-12 ion-fixed>
            <ion-list>
                <ion-card>
                    <ion-card-header>
                        <ion-img class="logo" alt="logo" [src]="myImage"></ion-img>
                    </ion-card-header>
                    <ion-card-content>
                        <ion-item>
                            <ion-label floating>Full Name</ion-label>
                            <ion-input autocomplete="on" type="text" #name></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Email-ID</ion-label>
                            <ion-input autocomplete="on" type="email" #email></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Mobile Number</ion-label>
                            <ion-input autocomplete="on" type="number" #mobile></ion-input>
                        </ion-item>
                        <ion-item>
                            <ion-label floating>Company Name</ion-label>
                            <ion-input autocomplete="on" type="text" #companyName></ion-input>
                        </ion-item>
                        <ion-item class="mpin">
                            <ion-label text-center floating><b>MPIN</b></ion-label>
                            <ion-input text-center type="password" #mpin></ion-input>
                        </ion-item>
                        <ion-item class="proceedButton">
                            <button ion-button large color="secondary" outline padding strong round (click)="register()">&nbsp;<ion-icon name="arrow-forward"></ion-icon>&nbsp;</button>
                        </ion-item>
                        <ion-item>
                            <button ion-button large color="primary" outline padding block round (click)="home()">Registered? Login Now!</button>
                        </ion-item>
                    </ion-card-content>
                </ion-card>
            </ion-list>
           </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

这是register-user.ts代码

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-register-user',
  templateUrl: 'register-user.html',
})

export class RegisterUserPage
    {
        @ViewChild('name') name;
        @ViewChild('email') email;
        @ViewChild('mobile') mobile;
        @ViewChild('companyName') companyName;
        @ViewChild('mpin') mpin;

        myImage:string="";

        constructor(public navCtrl: NavController, public navParams: NavParams)
            {
                this.myImage="./assets/logo.png";
            }

        register()
            {
                // do the register code here
            }   

        ionViewDidLoad()
            {
                console.log('ionViewDidLoad RegisterUserPage');
            }
    }

Answer 1

键盘存在覆盖输入的问题。我解决这个问题的方法是将键盘设置更改为位于页面顶部而不是将其向上移动。

在AndroidManifest.xml中，我将windowSoftInputMode更改为adjustPan。 android:windowSoftInputMode="adjustPan"

在设备上打开键盘时，离子内容会上移

1 个答案: