Ionic应用程序后退按钮导致以前的状态屏幕重叠 [英] Ionic app back button causes previous state screens to overlap

问题描述

我正在处理一个离子项目，并且遇到一个奇怪的错误，即按后退"按钮会导致同时显示最后两个视图.我一直在尝试修复此问题已有几周了，但是没有运气，所以我希望你们中的一个遇到这个问题并能为您提供帮助！

I am working on an ionic project and am encountering a strange bug where pressing the back button causes the last two views to display at the same time. I've been attempting to fix this for a few weeks now with no luck so I'm hoping one of you have encountered this and can help!

该应用程序默认为初始化"状态，该状态仅检查用户是否已登录.如果它们已经登录，则将其置于主页"状态.如果未登录，则会将它们置于着陆"状态.

The app defaults to the state "Initialize" which just checks if the user is logged in already or not. If they are already logged in it throws them to the "Home" state. If they are not logged in it puts them at the "Landing" state.

着陆"状态具有一个登录模式，在您键入电子邮件和密码的地方会弹出该模式.成功登录后，它会使您回到初始化"状态，然后因为您现在已登录，因此将您定向到主页"状态.

The "Landing" state has a login modal that pops up where you type your e-mail and password. After logging in successfully it puts you back to the "Initialize" state which then directs you to the "Home" state because you're logged in now.

执行以下操作时会出现问题:初始化->登陆->初始化->主页(制表符屏幕)->任何给定标签上的2个屏幕深处，然后按返回按钮然后，它将显示最后两个视图，每个视图都占据整个屏幕，一个占据整个屏幕，另一个占据整个视图的50％，并且是透明的.

The problem is arising when you do the following: Initialize -> Landing -> Initialize -> Home (Tabs Screen) -> 2 screens deep on any given tab, then press the back button It will then show the last two views each occupying the screen with one occupying the whole screen and the other occupying 50% of the view and transparent.

所以一个例子是:初始化->登陆->初始化->主页->用户个人资料->消息用户->后退按钮现在，我将看到用户个人资料和主屏幕同时显示，而用户个人资料"占据了全屏，而主屏幕则占据了视图的50％，并且是透明的.

So an example would be: Initialize -> Landing -> Initialize -> Home -> User Profile -> Message User -> Back button Now I will see User Profile & Home screen both up at the same time with User Profile taking up the full screen while Home screen takes up 50% of the view and is transparent.

如果用户已经登录，则不会发生此问题，因此跳过登录"页面，直接进入主页"选项卡视图.

This problem does NOT happen if the user was already logged in, therefore skipping the Landing page and going directly to the Home Tabs view.

///////////////////更新:我在tabs.html中也有一个ion-side-menu，在ion-side-menu-content中有选项卡视图..我发现，如果我删除了侧面菜单，问题就消失了...//////////////////

////////////////// Update: I also have an ion-side-menu inside tabs.html with the tab views inside the ion-side-menu-content.. I discovered that if i remove the side menu, the problem goes away... ///////////////////

我怀疑这与我错误地设置状态有关吗?

My suspicion is that it has to do with me setting up the states incorrectly?

我已经在网络浏览器和&iOS 9和10

I have confirmed the problem on both web browser & ios 9 & 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'
    }
  }
})

推荐答案

我通过添加以下CSS解决了该问题:

I resolved the problem by adding the following 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;
}

这篇关于Ionic应用程序后退按钮导致以前的状态屏幕重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！