拖动页面内容视图在iOS 8移动应用程序上创建一个空白屏幕

时间:2015-05-26 12:08:31

标签: ios iphone angularjs swipe ionic

在离子ios应用程序中,滑动页面显示空白屏幕。请帮我解决此问题。

app.js

 $stateProvider.state('login',
      {
          cache: false,
          url: '/login',
          templateUrl: 'templates/Login.html',
          controller: 'loginCtrl'

      })

这是Login.html模板页面

<ion-view view-title="Login" hide-nav-bar="true" padding="true">

<ion-header-bar align-title="center" class="bar-positive">

    <h1 class="title">Login</h1>
</ion-header-bar>
<ion-content scroll="true" overflow-scroll="true">
       <form name="signInForm" novalidate="" ng-submit="tryLogin(signInForm)">
        <div class="list-header">
            <label class="item item-input" tabs-item-hide="true" ng-class="{ 'has-errors' : signInForm.Email.$invalid, 'no-errors' : signInForm.Email.$valid}">
                <input type="email" placeholder="Email" name="Email" ng-model="loginData.Email" autofocus required>
            </label>
            <span class="form-errors" ng-show="signInForm.Email.$error && signInForm.$submitted" ng-messages="signInForm.Email.$error" ng-messages-include="templates/form-errors.html">

            </span>
            <label class="item item-input">
                <input type="password" placeholder="Password" name="Password" ng-model="loginData.Password" required>
            </label>
            <span class="form-errors" ng-show="signInForm.Password.$error && signInForm.$submitted" ng-messages="signInForm.Password.$error" ng-messages-include="templates/form-errors.html">

            </span>
            <div>&nbsp;</div>
            <p class="text_right">
                <a href="#/forgotPassword">Forgot Password?</a>
            </p>
            <div>
                <button class="button button-block button-positive">Login</button>
            </div>

            <div style="text-align: center">
                <a href="#/SignUp">Create an account</a>

            </div>

        </div>
    </form>
</ion-content>

我的主页HTML:

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
            </ion-nav-buttons>
         </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left" >
        <ion-header-bar class="bar-positive">
            <h1 class="title">MY App</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item class="item item-icon-left" nav-clear menu-close href="#/Settings">
                    <i class="icon ion-gear-b"></i>Settings
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

</ion-side-menus>

现在从iPhone显示空白屏幕的子页面,将其冷却再次加载 enter image description here

2 个答案:

答案 0 :(得分:4)

只需在AngularJS模块的配置中使用以下代码行

angular.module(....)
.config(function($stateProvider,$urlRouterProvider,$ionicConfigProvider){
$ionicConfigProvider.views.swipeBackEnabled(false);
//remaining code in config
}

答案 1 :(得分:0)

github上创建了一个问题,并且现金被禁用被确定为问题的原因。此外,来自离子团队的回复如下:(github上的最后回复)

  

这是由禁用缓存引起的。缓存您的观点有很大好处,像这样的边缘案例并不是我们想要支持的。

     

如果您担心数据未更新,可以使用该视图   生命周期事件,以确保数据是最新的。

因此,如果您需要禁用缓存,并且您不关心此功能,则可以将其禁用,因为@Arul说。如果你想要这个功能,你必须启用缓存。