Question

我正在使用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%;
}

Answer 1

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

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

 <Button
            android:id="@+id/registration_button_scancode"
            android:layout_weight="3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="QR Code Scannen"
            />

在控制器

中

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

CSS

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

标记

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

当向上滚动显示密码输入时，如何防止离子视图反弹回来？

1 个答案: