向上滚动以显示密码输入时如何防止 Ionic 视图弹回？答案

【问题标题】：How to prevent Ionic view from bouncing back down when scrolling up to reveal password input?向上滚动以显示密码输入时如何防止 Ionic 视图弹回？
【发布时间】：2015-11-05 05:36:53
【问题描述】：

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

【问题讨论】：

标签： javascript ios ionic-framework ionic-view

【解决方案1】：

好的，我就是这样解决的。

我没有找到默认解决方案，所以我不得不使用 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 }">

【讨论】：