0

我正在使用 ionic 4，当输入有焦点时，键盘会显示并将屏幕向上推，我无法滚动 html 设计粉碎并且看起来不太好

她是我正在使用的代码

<ion-header no-border>
 <ion-toolbar>
<ion-row id="progressbar" class="top-bar">
  <app-progress [progress]="loadProgress"></app-progress>
</ion-row>
<ion-buttons slot="start">
  <ion-back-button class="back-button" *ngIf="back" mode="ios" icon="ios- 
  arrow-back" color="dark"
    (click)="backSlide()"></ion-back-button>
  </ion-buttons>
   <ion-buttons slot="end" mode="md">
  <ion-button class="page-numbering" mode="md">
    <span class="first-page-number textBlack">{{pageNumber}}</span><span 
   class="second-page-number normal">/5</span>
    </ion-button>
  </ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content [ngClass]="{'no-padding-div': isIonContent, 'padding-div': !isIonContent}" 
 force-overscroll="false" fixed="true">
<ion-slides [options]="slideOpts" #slides>
  <ion-slide>
      <ion-grid id="profileGrid">
        <ion-row id="containerRow">
          <ion-col no-padding>
           <form [formGroup]="profileForm" class="formStyle">
              <ion-row id="title-message" class="info-box-profile">
                  <ion-row class="welcome-title medium" justify-content-center><ion-label></ion-label></ion-row>
                  <ion-row class="welcome-sbtitle normal" justify-content-center><ion-label></ion-label></ion-row>
              </ion-row>
              <ion-row id="fname">
                  <p class="box-titles normal">What’s your first name?</p>
                  <ion-item mode="md">
                    <ion-input class="normal" formControlName="First_Name" placeholder="First name" id="name" mode="md"></ion-input>
                  </ion-item>
              </ion-row>
              <ion-row id="bday" align-items-start>
                  <p class="box-titles normal">When is your birthday?</p>
                  <ion-item mode="md">

                  <ion-datetime #picker class="normal timePicker" formControlName="Date_Of_Birth" displayFormat="MM/DD/YYYY"
                    Placeholder="Date of birth" pickerFormat="MM/DD/YYYY" [(ngModel)]="date"
                    (ionChange)="picktime($event)" mode="md"></ion-datetime>
                    <ion-icon class="arrow-down-icon" name="ios-arrow-down" slot="end"></ion-icon>
                    </ion-item>
              </ion-row>
              <ion-row align-items-start id="gender-title">
                  <p class="box-titles normal">Which one are you?</p>
                </ion-row>
              <ion-row id="gender-row" justify-content-center>
                    <ion-col align-self-center size="6">
                      <div (click)="female()" class="female" [ngClass]="{'female-image': gender == '', 'female-image1': gender == 'female', 'female-image2': gender == 'male'}">
                      </div>
                    </ion-col>
                    <ion-col align-self-center size="6">
                      <div (click)="male()" class="male" [ngClass]="{'male-image': gender == '', 'male-image1': gender == 'male', 'male-image2': gender == 'female'}">
                      </div>
                    </ion-col>
              </ion-row>
              <ion-row id="next-button" justify-content-center>
                <ion-button class="cta" shape="round" color="secondary" expand="full"
                  [disabled]="(profileForm.valid) ?  false : true" (click)="onClick()">
                  Next
                </ion-button>
                <!-- <ion-button class="cta" shape="round" color="secondary" expand="full"
                [disabled]="(profileForm.valid && gender != '') ?  false : true" (click)="onClick()">
                Next
              </ion-button> -->
              </ion-row>
            </form>
          </ion-col>
        </ion-row>
      </ion-grid>
  </ion-slide>
  <ion-slide>   
  ....
   </ion-slides>
    </ion-content>

当我点击名字输入时，键盘将屏幕向上推，内容粉碎，我尝试了很多解决方案，但没有一个对我有用，我还在我的 app.module.ts 中添加了这个

    IonicModule.forRoot({
  mode: 'ios',
  scrollAssist: false,
  scrollPadding: false,
}),

在此处输入图像描述

4

0 回答 0