Ionic中的默認活動選項卡

我正在使用Ionic1並需要幫助來弄清楚默認活動選項卡機制的工作原理。目前，有3個選項卡，默認的活動選項卡是正確的。我希望它是左邊的。Ionic中的默認活動選項卡

我跟着這個例子 - 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>

感謝。

來源

2016-10-26 badigard

我解決它通過給每個選項卡與特定的網址自身狀態的結束並查看：

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

不知道爲什麼或何時應該使用多個視圖。

來源

2016-10-31 11:03:07 badigard

在我看來，您在帖子中提供的codepen鏈接默認爲第一個選項卡，然後跳轉到第三個選項卡。

此意外的行爲是由下面的代碼引起的。因此，如果您刪除此代碼，則您的選項卡應默認保留。

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

來源

2016-10-26 17:08:46 whyyie

是的，這在codepen示例中正常工作。但在我的應用程序中，它默認從第三個選項卡開始。我想了解什麼控制了訂單。我無法擁有與codepen示例中相同的行爲。 – badigard

It's簡單，只需改變這一行：

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

在app.js

來源

2016-10-26 17:11:59 Edison

app.js已經包含'$ urlRouterProvider.otherwise（'/ app/home'）'，這會導致以下狀態：.state（'app.home'，{ url：'/ home'， templateUrl：'app /home/home.html'， controller：'HomeController'， controllerAs：'vm'， }）; 'app.article'狀態在我的應用程序中處於內部狀態（希望我明確表示） – badigard

Ionic中的默認活動選項卡

回答

相關問題