Question

当键盘孔打开时推入的孔屏且响应式设计出现问题

enter image description here enter image description here

<ion-content padding style="background: #B4838C; scroll-behavior: auto">
    <ion-grid style="height:100%;width:100% ; scroll-behavior: auto">
        <ion-row style="position:relative;top:5px; height:10%;max-height:10%;">
            <ion-col offset-1="" align-self-center="">
                <img src="../../assets/imgs/popUp.png" style="width: 10%" (click)="popNav()">
            </ion-col>
            <ion-col text-end="" align-self-center="">
                <button ion-button="" [full]="" class="btnStyle">
                    Change language
                </button>
            </ion-col>
</ion-row>
        <ion-row style="position:relative; height:50%;max-height: 60%; justify-content: center">
            <img src="../../assets/imgs/gr2.png" class="imgStyle">
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Email" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Password" type="Password"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Full name" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col col-12="">
                <ion-item style="background: #232648">
                    <ion-input placeholder="Phone number" type="text"></ion-input>
                </ion-item>
            </ion-col>
        </ion-row>

        <ion-row style="position:relative; height:10%;max-height: 10%; background: #232648">
            <ion-col >
                <button  ion-button="" style="background: white;color: black; border-radius: 20px; width: 100%"> Sign In </button>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

我构建了ionic 3应用程序。我有输入字段，当我按它们开始输入任何内容时，屏幕就会改变。

Answer 1

按如下所示修改您的app.module.ts文件

 @NgModule({
    declarations: [
        MyApp,
        //...
    ],
    imports: [
        //...
        IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false
        })
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        // ...
    ],
    providers: [
        // ...
    ]
})
export class AppModule { }

ionic 3-键盘推动整个屏幕

1 个答案: