angularjs - ionic 框架中的嵌套标签栏

Question

在 Ionic 框架中有没有办法有一个像这样的嵌套标签栏:



我在 Codepen 中尝试过，但它并没有真正起作用:

Example on Codepen

.state('tabs.about', {
    url: "/about",
    abstract: true,
    views: {
        'about-tab': {
            templateUrl: "templates/about.html"
        }
    }
})

.state('tabs.about.page1', {
    url: "/page1",
    views: {
        'about-page1': {
            templateUrl: "templates/about-page1.html"
        }
    }
})

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page2': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

有没有人知道正确的方法来做到这一点？

谢谢

Answer 1

我尝试在 codePen 上举例，但我没有按预期工作。但是我在本地项目中解决了您的问题。确保您拥有最新版本的 ionic 或者您可以使用以下内容更新它:

npm install -g ionic

你快到了。您需要在 View 中设置摘要，如下所示:

angular.module('ionicApp', ['ionic'])

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

$stateProvider

.state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
})

.state('tabs.home', {
    url: "/home",
    views: {
        'home-tab': {
            templateUrl: "templates/home.html",
        }
    }
})

.state('tabs.about', {
    url: "/about",        
    views: {
        'about-tab': {
            templateUrl: "templates/about.html",
            abstract: true
        }
    }
})

.state('tabs.about.page1', {
    url: "/page1",
    views: {
        'about-page1': {
            templateUrl: "templates/about-page1.html"
        }
    }
})

.state('tabs.about.page2', {
    url: "/page2",
    views: {
        'about-page2': {
            templateUrl: "templates/about-page2.html"
        }
    }
});

$urlRouterProvider.otherwise("/tab/home");

}); 

并使用您评论过的代码:

<ion-tabs class="tabs-striped tabs-top tabs-background-stable">

             <ion-tab title="Page 1" ui-sref="tabs.about.page1">
               <ion-nav-view name="about-page1"></ion-nav-view>
             </ion-tab>

             <ion-tab title="Page 2" ui-sref="tabs.about.page2">
                 <ion-nav-view name="about-page2"></ion-nav-view>
             </ion-tab>

         </ion-tabs>

我评论了之前的标签代码，特别是这个:

<!--<div class="tabs-striped tabs-top tabs-background-stable">
         <div class="tabs">
           <a class="tab-item" ui-sref="tabs.about.page1">
             Page 1
           </a>
           <a class="tab-item" ui-sref="tabs.about.page2">
             Page 2
           </a>
         </div>
       </div>-->

其余的 HTML 代码相同

我的 ionic 版本是:1.3.19

我希望它能帮助你