0

我正在使用 Ionic 框架来构建移动 iOS 应用程序。我的登录视图如下所示：

在此处输入图像描述

第二个输入，密码输入被键盘隐藏了一半，但是当我向上滚动以显示第二个输入并放手时，视图反弹回原来的状态，仍然掩盖了第二个输入。

这是中间状态（我按住并向上滚动）

在此处输入图像描述

我可以单击以选择第二个输入，但体验不是用户友好的。

我想：

  • 允许用户向上滚动并保持滚动位置而不会反弹，以便他们可以选择第二个输入
  • 或者，一旦选择了第一个输入，向上移动视图，使键盘位于第二个输入下方，从而易于访问。

下面是我的 login.html 模板的标记

<ion-view view-title="Login" ng-controller="LoginCtrl as login">
    <ion-content>
        <div class="splash">
            <div class="x-splash" ng-click="login.xSplash()"></div>

            <header>
                <h1><div class="logo"></div></h1>
                <h2>All change is detectable.</h2>
            </header>

            <div class="divider"><hr></div>

            <section class="login-form">
                <form name="loginForm" ng-submit="login.login(credentials)" novalidate>

                    <div class="login-alert" ng-class="{ hideLoginMsg: login.hideMessage == true }">{{ login.message }}</div>

                    <input type="text"
                           id="username"
                           placeholder="Username"
                           name="username"
                           ng-model="credentials.username">

                    <input type="password"
                           id="password"
                           placeholder="Password"
                           name="password"
                           ng-model="credentials.password">

                    <button type="submit" class="btn-green">Login &raquo;</button>
                </form>

            </section>

            <p class="small-p">
                <a href="#">Forgot your password?</a>
            </p>
        </div>
    </ion-content>
</ion-view>

当我在 Chrome 中检查时，ion-nav-view标记是这样的：

<ion-nav-view class="view-container" nav-view-transition="ios" nav-view-direction="back"><ion-view view-title="Login" ng-controller="LoginCtrl as login" class="pane" nav-view="active" style="opacity: 1; transform: translate3d(0%, 0px, 0px);">
<ion-content class="scroll-content ionic-scroll"><div class="scroll" style="transform: translate3d(0px, -32.5px, 0px) scale(1);">
    <div class="splash">
        <div class="x-splash" ng-click="login.xSplash()"></div>

和.view-container班级：

.view-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
4

1 回答 1

0

好的，这就是我解决它的方法。

我没有找到默认解决方案，所以我不得不使用 ng-focus 和 ng-class 来更改样式，以便用户可以轻松访问第二个输入。

<input type="text"
       id="username"
       placeholder="Username"
       name="username"
       ng-focus="login.loginFocused()"
       ng-model="credentials.username">

在控制器中

function loginFocused() {
    vm.inputFocused = true;
}

CSS

.splash-up {
    position: absolute !important;
    top: -40px !important;
}

标记

<ion-view view-title="Login" ng-controller="LoginCtrl as login" has-bouncing="false">
    <ion-content>
        <div class="splash"
             ng-click="login.splashClick()"
             ng-class="{ 'splash-up'      : login.inputFocused,
                         'splash-default' : login.inputFocused == false }">
于 2015-11-04T21:36:53.360 回答