Question

我正在使用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>

感谢。

Answer 1

很简单，只需更改此行：

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

在app.js

的末尾

Answer 2

我通过给每个标签提供了具有特定网址和视图的自己的状态来解决它：

.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',
            }
          }
      });

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

Answer 3

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

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

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

Ionic中的默认活动选项卡

3 个答案: