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

Question

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

第二个输入，密码输入被键盘半隐藏了，但是当我向上滚动以显示第二个输入并松开时，视图弹回到原来的状态，仍然遮住第二个输入。

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

我可以点击 select 第二个输入，但体验不友好。

我想：

允许用户向上滚动并保持滚动位置而不会反弹，这样他们就可以select第二个输入
或者在第一个输入 select 编辑后，将视图向上移动，使键盘位于第二个输入的下方，以便于访问。

下面是我的 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 class:

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

Answer 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 }">

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

How to prevent Ionic view from bouncing back down when scrolling up to reveal password input?

javascript

ios

ionic-framework

ionic-view