Ionic 中的默认活动选项卡答案

【问题标题】：Default Active Tab in IonicIonic 中的默认活动选项卡
【发布时间】：2016-10-31 19:03:07
【问题描述】：

我正在使用 Ionic1，需要帮助了解默认的活动选项卡机制是如何工作的。目前，有 3 个选项卡，默认的活动选项卡是正确的选项卡。我希望它是左边的。

我遵循了这个例子 - Ionic : Select Tab - CodePen - 这里默认的活动标签是左边的标签（这是我想要的），所以我不明白为什么在我的应用程序中默认是右边的标签，而在例子中是左侧标签。

有人能解释一下这个主题吗？

我的代码

article.route.js：

.state('app.article', {
        abstract: true,
        templateUrl: 'app/article/articleTabs.html',
      })


      .state('app.article.details', {
        url: '/home/:articleID',
          views: {
            'first-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            },
            'second-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            },
            'third-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            }
          }
      });

articleTabs.html：

<ion-tabs>
  <ion-tab title="First" ui-sref="app.article.details">
    <ion-nav-view name="first-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Second" ui-sref="app.article.details">
    <ion-nav-view name="second-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Third" ui-sref="app.article.details">
    <ion-nav-view name="third-tab"></ion-nav-view>
  </ion-tab>
</ion-tabs>

article.html：

<ion-view>
  <ion-nav-buttons side="secondary">
    <button class="button button-large ion-ios-location" ng-click="vm.doSomething()">
    </button>
  </ion-nav-buttons>
  <ion-content has-bouncing="false" overflow-scroll="true">
    ...........
    </div>
  </ion-content>
</ion-view>

谢谢。

【问题讨论】：

标签： ionic-framework

【解决方案1】：

很简单，只需更改这一行：

$urlRouterProvider.otherwise('//the default tab you needed');

在 app.js 的末尾

【讨论】：

app.js 已经包含 '$urlRouterProvider.otherwise('/app/home')'，导致这个状态：.state('app.home', { url: '/home' , templateUrl: 'app/home/home.html', 控制器: 'HomeController', controllerAs: 'vm', }); 'app.article' 状态是我的应用程序的内部状态（希望我说清楚了）

【解决方案2】：

我通过为每个选项卡提供具有特定 url 和视图的状态来解决它：

.state('app.article.details', {
        url: '/home/:articleID/first',
          views: {
            'first-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            }
          }
      }),
.state('app.article.details', {
        url: '/home/:articleID/second',
          views: {
           'second-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            }
          }
      }),
.state('app.article.details', {
        url: '/home/:articleID/third',
          views: {
           'third-tab': {
              templateUrl: 'app/article/article.html',
              controller: 'ArticleController',
              controllerAs: 'vm',
            }
          }
      });

不知道为什么或何时应该使用多个视图。

【讨论】：

【解决方案3】：

在我看来，您在帖子中提供的 codepen 链接默认为第一个选项卡，然后跳转到第三个选项卡。

此意外行为是由以下代码引起的。因此，如果您删除此代码，您的选项卡应默认为左。

 $timeout( function() {
    $ionicTabsDelegate.select(2, false);    
  },400);

【讨论】：

是的，这在 codepen 示例中运行良好。但在我的应用程序中，它默认从第三个选项卡开始。我试图了解是什么控制了订单。我无法拥有与 codepen 示例中相同的行为。