进入已导航的标签时返回顶视图

时间:2019-04-06 14:53:18

标签: ionic-framework tabs angular-ui-router reload

我们正在开发一个ionic v1应用程序,该应用程序的底部具有经典的标签栏,每个标签按钮都有不同的页面。 选项卡按钮中的一个(例如“ btn1”)导航到包含列表的视图(例如“ view1”),在点击时导航到另一个视图(例如“ view2”),但选项卡栏仍保持在底部。 我们的问题是,当我们在进入view2时使用tab按钮导航到另一个视图时,点击btn1会进入view2而不是view1。 View2在以前的导航中仍然完好无损,其中包括一个后退按钮,无论如何我们都可以使用它返回到view1。 输入选项卡时,是否有任何方法可以始终进入树的顶视图,而不是获取它的上一个状态?

这是一些代码。

routes.js

angular.module('app.routes', [])

    .config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

        $ionicConfigProvider.tabs.position('bottom'); //bottom
        $ionicConfigProvider.views.swipeBackEnabled(false);

        $stateProvider

            .state('tabsController', {
                url: '/page1',
                templateUrl: 'templates/tabsController.html',
                abstract: true
            })

            .state('tabsController.view0', {
                url: '/view0',
                views: {
                    'tab1': {
                        templateUrl: 'templates/view0.html',
                        controller: 'view0Ctrl'
                    }
                }
            })

            .state('tabsController.view1', {

                url: '/view1',
                views: {
                    'tab5': {
                        templateUrl: 'templates/view1.html',
                        controller: 'view1Ctrl'
                    }
                }
            })
            .state('tabsController.view2', {

                url: '/view2',
                params: {
                    id_categoria: null,
                    des_categoria: null
                },
                views: {
                    'tab5': {
                        templateUrl: 'templates/view2.html',
                        controller: 'view2Ctrl'
                    }
                }
            })



    });

tabsController.html

<ion-view>
  <ion-tabs class="tabs-icon-top tab-nera">
    <ion-tab title="Home" icon="ion-ios-home" href="#/page1/view0">
      <ion-nav-view name="tab1"></ion-nav-view>
    </ion-tab>
    <ion-tab title="Cerca" icon="ion-ios-search" href="#/page1/view1" >
      <ion-nav-view name="tab5"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</ion-view>

view1.html

<ion-view title="Find" cache-view="false">

    [...]

    <ion-content padding="false" class="has-subheader" delegate-handle="listView1">

        [...]

        <ion-list ng-show="array.length > 0">
            <ion-item class="item-thumbnail-left" ng-repeat="c in array" ng-click="open(c);">
                <img ng-src="{{c.img}}" err-src="img/dafault.png" style="-o-object-fit:contain;object-fit:contain;">
                <p>{{c.text}}</p>
            </ion-item>
        </ion-list>

        [...]

    </ion-content>

</ion-view>

view1Ctrl.js

.controller('view1Ctrl', function ($ionicHistory, $scope, FactHttp, $ionicLoading, $state, $ionicPopup, $ionicScrollDelegate, $timeout) {

        [...]

        $scope.open = function (record) {
            if (record) {
                $state.go("tabsController.view2", { "id_record": record.id_record, "title": record.title, "img": record.img, "id_user": record.id_user });
            }
        }

        [...]

    }

View2.html仅显示信息,不提供任何交互。下面是ion-view标签:

<ion-view title="SomeTitle">

0 个答案:

没有答案