首页 文章

离子导航后退按钮和state.go - 后面的动作很有意思

提问于
浏览
2

我正在使用Ionic和AngularJS(stateProvider)

我在抽象状态的默认模板中添加了以下代码

<ion-nav-bar class="bar-stable">
 <ion-nav-back-button>
 </ion-nav-back-button>
</ion-nav-bar>

加载默认控制器(显示StateA)时,它通过调用转换到另一个状态(StateB)

$state.go(...);

这导致加载另一个模板,并在子视图中显示 . 此外,它还激活后退按钮 .

  • 单击导航栏中的后退按钮后,将返回默认页面(StateA) .

  • 导航栏中的后退按钮变为不可见,但如果我按下移动设备上的后退按钮,则会将我带回到过渡状态(StateB) .

这有点奇怪,为什么StateB再次显示而不是应用程序关闭 .

1 回答

  • 1

    当用户在整个应用程序中导航时,Ionic可以跟踪他们的导航历史记录 . 通过了解其历史记录,使用平台的过渡样式正确地进入和退出视图之间的过渡 . 来自Ionic Doc

    Ionic将使用stateProvider自动跟踪您的状态历史记录,因此它就像是一堆历史记录 .

    从状态A开始,堆栈只有一页:A .

    | A |
    

    之后你进入状态B,它将被推入历史堆栈:

    | B |
    | A |
    

    而Ionic提供的导航视图将在导航栏中显示后退按钮,因为它认为您正在进行状态转换并帮助您保留历史记录(如iOS中的导航控制器) .

    然后,如果单击导航栏中的后退按钮,历史堆栈将弹出B,并再次显示A.

    | A |
    

    后退按钮将为您删除,因为您将返回初始状态(如根页) .

    为什么单击移动设备上的后退按钮,它会让我回到过渡状态?

    您正在操纵全局窗口对象的窗口历史记录(Compiled Ionic App仍然被认为是一个Web应用程序,即使在我认为的移动平台中) . 这与您在浏览器中点击“后退”按钮时的操作非常相似 .

    /A <- /B(window history) <- /A (current page)
    

    我也在这里学习Ionic,所以不确定我是否正确理解所有概念 . 希望这可以帮助!

相关问题