Ionic app back按钮会导致之前的状态屏幕重叠

Question

我正在研究离子项目并遇到一个奇怪的错误，按下后退按钮会导致最后两个视图同时显示。我一直试图解决这个问题几个星期没有运气，所以我希望你们中的一个人遇到过这个并且可以提供帮助！

应用程序默认为“Initialize”状态，它只检查用户是否已登录。如果他们已经登录，则会将其置于“Home”状态。如果他们没有登录，则将其置于“登陆”状态。

“登陆”状态有一个登录模式，弹出您输入电子邮件和密码的位置。成功登录后，它会返回“初始化”状态，然后指示您进入“主页”状态，因为您现在已登录。

执行以下操作时会出现问题： 初始化 - ＆gt;着陆 - ＆gt;初始化 - ＆gt;主页（标签屏幕） - ＆gt;在任何给定选项卡上深2个屏幕，然后按后退按钮 然后它将显示每个占据屏幕的最后两个视图，其中一个占据整个屏幕，另一个占据视图的50％并且透明。

所以一个例子是： 初始化 - ＆gt;着陆 - ＆gt;初始化 - ＆gt;首页 - ＆gt;用户资料 - ＆gt;消息用户 - ＆gt;返回键 现在我将看到User Profile＆amp;当主屏幕占据视图的50％并且透明时，主屏幕同时在用户配置文件占用全屏时同时启动。

如果用户已登录，则不会发生此问题，因此会跳过“目标”页面并直接转到“主页”选项卡视图。

////////////////// 更新：我在tabs.html里面还有一个离子侧菜单，里面有离子侧菜单内容的标签视图..我发现如果我删除侧面菜单，问题就会消失...... ///////////////////

我怀疑是否与我错误地设置状态有关？

我已经在网络浏览器和网站上确认了这个问题。 ios 9＆amp; 10

  $stateProvider.state('initialize', {
url: '/initialize',
templateUrl: 'templates/loading.html',
controller: 'initCtrl'
})
.state('landing', {
  url: '/landing',
  templateUrl: 'templates/landing.html',
  controller: 'landingCtrl'
})
.state('tab', {
url: '/tab',
templateUrl: 'templates/tabs.html',
controller: 'tabCtrl'
})
.state('tab.home', {
  url: '/home',
  views: {
    'home': {
      templateUrl: 'templates/fitSpot_home.html',
      controller: 'FitSpotHomeCtrl'
    }
  }
})
.state('tab.fitSpot_groupClasses', {
  url: '/home/groupClasses',
  views: {
    'home': {
      templateUrl:  'templates/fitSpot_groupClasses.html',
      controller: 'FitSpotGroupClassesCtrl'
    }
  }
})
.state('tab.groupClasses_detail', {
  url: '/home/groupClasses/groupClass_detail/:session_id',
  views: {
    'home': {
      templateUrl:  'templates/fitSpot_groupClasses_detail.html',
      controller: 'FitSpotGroupClassesDetailCtrl'
    }
  }
})

Answer 1

我通过添加以下CSS来解决问题：

[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="entering"],
[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="leaving"]{
  z-index:1;
}

[nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="entering"],
[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="leaving"]{
  z-index:1;
}

[nav-view-transition="ios"] [nav-view="entering"],
[nav-view-transition="ios"] [nav-view="leaving"]{
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px;
}

Answer 2

我遇到了类似$ state的问题。但我的旧观点不会永远存在。在他们离开之前只有一些延迟。

不确定它是否适用于您的情况。

无论如何，我只是将它发布在这里供你参考。

App.config(function ($provide) {
$provide.decorator('$state', function ($delegate) {
    var state = $delegate;
    state.baseGo = state.go;

    var go = function (to, params, options) {
        options = options || {};

        //the part that supposed to be removed after the new $state
        //is wrapped with the "fade-in-up"
        $('.fade-in-up').html(''); //i cheat a bit using jQuery
        this.baseGo(to, params, options);
    };

    state.go = go;

    return $delegate;
  });
})