angularjs – Ionic Framework中的嵌套选项卡栏

发布时间：2020-12-17 07:21:42 所属栏目：安全来源：网络整理

导读：在Ionic框架中有没有一种方法可以像这样使用嵌套的标签栏：我在Codepen中尝试过,但它并没有真正起作用： Example on Codepen .state('tabs.about',{ url: "/about",abstract: true,views: { 'about-tab': { templateUrl: "templates/about.html" } }}).stat

在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"
        }
    }
});

有人知道这样做的正确方法吗？

谢谢

我试着在codePen上举例,但是我没有按照我的预期工作.但我在一个本地项目中解决了你的问题.确保您拥有离子的最新版本,或者您可以使用以下版本进行更新：

npm install -g ionic

你快到了.您需要将摘要设置为这样的视图：

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

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

$stateProvider

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

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

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

.state('tabs.about.page1',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代码是相同的

我的离子版本是：1.3.19

我希望它对你有所帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!