如何避免在标签栏状态中堆叠导航历史记录 [英] How to avoid stacking navigation history in tab-bar states

查看:22
本文介绍了如何避免在标签栏状态中堆叠导航历史记录的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

标签 A - 标签 B - 标签 C

Tab A - Tab B - Tab C

状态如下;tabs.a, tabs.b, tab.c

States like below; tabs.a, tabs.b, tab.c

我想关闭应用程序,就像在每个选项卡状态切换时没有导航历史

I want to close app like there is no navigation history when switching in each of tab states

例如:我在 Tab A 然后我点击 Tab B 然后我点击 Tab C 从现在开始如果用户按下后退按钮应用程序应该关闭.在正常行为中,导航历史会堆积起来,如果我按下后退按钮,我会从选项卡 C 转到选项卡 B.如何避免这种行为

For example: I was in Tab A then I clicked to Tab B and then I clicked to Tab C from now on if user pushes back button the app should close. In normal behaviour navigation history stacks up and if I push back button I'll go to Tab B from Tab C. How to avoid this behaviour

下面是我的代码;

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html"
            })
            .state('tabs.a', {
                url: "/a",
                views: {
                    'a-tab': {
                        templateUrl: "templates/a.html",
                        controller: 'AController'
                    }
                }
            }).state('tabs.b', {
                url: "/b",
                views: {
                    'b-tab': {
                        templateUrl: "templates/b.html",
                        controller: 'BController'
                    }
                }
            }).state('tabs.c', {
                url: "/c",
                views: {
                    'c-tab': {
                        templateUrl: "templates/c.html",
                        controller: 'CController'
                    }
                }
            });

<ion-tabs class="tabs-royal tabs-striped">
    <ion-tab title="A" href="#/tab/a">
        <ion-nav-view name="a-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="B" href="#/tab/b">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="C" href="#/tab/c">
        <ion-nav-view name="b-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

推荐答案

我用简单的方法搞定了在标签状态的控制器范围内添加了一个功能

I have done it with a simple way Added a function in controller scope of tabs state

.state('tabs', {
                url: "/tab",
                abstract: true,
                templateUrl: "templates/tabs.html",
                controller: function($scope, $ionicTabsDelegate, $ionicHistory) {
                    $scope.rt = function(e, index) {
                        $ionicTabsDelegate.select(index);
                        //e.preventDefault();
                        $ionicHistory.nextViewOptions({historyRoot:true});
                    }
                }
            })

并在 tabs.html 模板中的每个 ion-tab 指令上添加 ng-click,如下所示;

and added ng-click on each ion-tab directive in tabs.html template like below;

<ion-tab ng-click="rt($event, 0)" title="A" href="#/tab/a">

rt函数的第二个参数是tab的索引

The second parameter of rt function is the index of tab

我使用了 $ionicHistory.nextViewOptions({historyRoot:true});

I used $ionicHistory.nextViewOptions({historyRoot:true});

来自文档

nextViewOptions()
设置下一个视图的选项.这个方法可以用于在 a 之前覆盖某些视图/转换默认值视图转换发生.例如, menuClose 指令使用此方法在内部确保动画视图过渡不会当侧菜单打开时发生,并将下一个视图设置为其历史堆栈的根.转换后这些选项被设置返回空值.

nextViewOptions()
Sets options for the next view. This method can be useful to override certain view/transition defaults right before a view transition happens. For example, the menuClose directive uses this method internally to ensure an animated view transition does not happen when a side menu is open, and also sets the next view as the root of its history stack. After the transition these options are set back to null.

可用选项:

disableAnimate:不为下一个过渡设置动画.
disableBack:下一个视图应该忘记它的后视图,并将其设置为空.
historyRoot: 下一个视图应该成为其历史堆栈中的根视图.

disableAnimate: Do not animate the next transition.
disableBack: The next view should forget its back view, and set it to null.
historyRoot: The next view should become the root view in its history stack.

这样我就达到了我想要的

That way I achieved what I want

这篇关于如何避免在标签栏状态中堆叠导航历史记录的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆