Question

我有一个使用ionic 2创建的登录表单，我想在键盘显示时禁用滚动，这是示例：

这是htmll login的代码：

<ion-content no-bounce padding style="background:url('assets/imgs/bg.jpg') no-repeat center;background-size:cover;" id="page1">
    <div class="header padding text-center">
        <img class="logoApp" src="assets/img/logo.png" alt="DoggyDOG" />
    </div>
    <ion-card>
        <ion-card-header>
            Login to join DoggyDOG
        </ion-card-header>
        <ion-card-content>
            <form (ngSubmit)="login()" novalidate>
                <ion-list no-line>
                    <ion-item>
                        <ion-input type="text" placeholder="Username"></ion-input>
                    </ion-item>
                    <div class="spacer" style="height:10px;" id="login-spacer2"></div>
                    <ion-item>
                        <ion-input type="password" placeholder="Password"></ion-input>
                    </ion-item>
                    <div class="spacer" style="height:12px;" id="login-spacer2"></div>
                    <a>Forgot your login detail? <b>Get help signing in</b></a>
                    <div class="spacer" style="height:10px;" id="login-spacer2"></div>
                    <button id="login-button1" ion-button round large color="energized" block icon-left style="font-weight:500;color:#ffffff;">
                    <ion-icon ios="ios-log-in" md="md-log-in"></ion-icon>      
                    Login
                </button>
            </form>

            <div class="spacer" style="height:10px;" id="login-spacer2"></div>

            <button ion-button icon-left block color="facebookbtn">
                    <ion-icon name="logo-facebook" md="logo-facebook"></ion-icon> Login with Facebook
                </button>
            <div class="spacer" style="height:2px;" id="login-spacer2"></div>

            <button ion-button icon-left block color="googlebtn">
                    <ion-icon ios="logo-google" md="logo-google"></ion-icon> Login with Google
                </button>
            </ion-list>
        </ion-card-content>
    </ion-card>

    <button ion-button icon-left block color="light">
                    <ion-icon ios="ios-person-add" md="md-person-add"></ion-icon> Don't have an account? Sign up
                </button>
</ion-content>

任何人都可以帮忙解决这个问题吗？

Answer 1

试试这个：

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    IonicModule.forRoot(MyApp,{
      scrollPadding: false,
      scrollAssist: false
    }),
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ]

Answer 2

默认情况下，ios设备中的表单不会像android一样获得滚动效果。您所要做的就是添加表单的mode。

<form (ngSubmit)="login()" novalidate mode="ios">

希望它可以帮助您解决这个问题

离子2：禁用登录表单输入焦点上的滚动

2 个答案: