如何在离子框架中使用选项卡菜单

Question

我正在使用 cordova 和 ionic 框架开发一个 android 应用程序。我是用于导航的侧边菜单和选项卡菜单。如何在使用侧边菜单加载的页面中使用选项卡菜单。这里是 app.js 文件

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

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

    /*--------------------menus in sidebar----------------------------------------------*/
    .state('app.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html",
          controller: 'homeCtrl' 
        }
      }
    })

    .state('app.announcements', {
      url: "/announcements",
      views: {
        'menuContent' :{
          templateUrl: "templates/announcements.html",
          controller:'announcementCtrl'
        }
      }
    })

    .state('app.deals', {
      url: "/deals",
      views: {
        'menuContent' :{
          templateUrl: "templates/deals.html",
          controller:'dealsCtrl'
        }
      }
    })

    .state('app.dining', {
      url: "/dining",
      views: {
        'menuContent' :{
          templateUrl: "templates/dining.html",
          controller:'diningCtrl'
        }
      }
    })

    .state('app.director', {
      url: "/director",
      views: {
        'menuContent' :{
          templateUrl: "templates/director.html"
        }
      }
    })

    .state('app.contact', {
      url: "/contact",
      views: {
        'menuContent' :{
          templateUrl: "templates/contact.html"
        }
      }
    })

    .state('app.about_app', {
      url: "/about_app",
      views: {
        'menuContent' :{
          templateUrl: "templates/about_app.html"
        }
      }
    })
    .state('app.quiz_register', {
        url: "/quiz_register",
        views: {
          'menuContent' :{
            templateUrl:'templates/register.html',  
            controller:'RegisterCtrl'
          }
        }
      })
     .state('app.quiz_web', {
        url: "/quiz_web",
        views: {
          'menuContent' :{
            templateUrl:'templates/registermodel.html', 
            controller:'WebCtrl'
          }
        }
      })

    /*----------------------------------menus in sidebar--------------------------------------------*/

    /*----------------------------------menus in homepage--------------------------------------------*/
    .state('app.about_gksf', {
      url: "/about_gksf",
      views: {
        'menuContent' :{
          templateUrl: "templates/about_gksf.html"
        }
      }
    })

    .state('app.culture', {
      url: "/culture",
      views: {
        'menuContent' :{
          templateUrl: "templates/culture.html"
        }
      }
    })

    .state('app.sponsors', {
      url: "/sponsors",
      views: {
        'menuContent' :{
          templateUrl: "templates/sponsors.html"
        }
      }
    })

    .state('app.gallery', {
      url: "/gallery",
      views: {
        'menuContent' :{
          templateUrl: "templates/gallery.html",
          controller:'galleryCtrl'
        }
      }
    })

    /*---------------------------------menus in homepage----------------------------------------*/

    /*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/

    .state('app.announcementsitem', {
      url: "/announcementsitem/:itemId",
      views: {
        'menuContent' :{
          templateUrl: "templates/announcementsitem.html",
          controller:'announcementdetailCtrl'
        }
      }
    })

    /*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/

    /*---------------------------------DEALS ITEM----------------------------------------*/

    .state('app.dealsitem', {
      url: "/dealsitem/:dealId",
      views: {
        'menuContent' :{
          templateUrl: "templates/dealsitem.html",
          controller:'dealsdetailsCtrl'
        }
      }
    })      
    /*---------------------------------DEALS ITEM----------------------------------------*/

    /*---------------------------------DINING ITEM----------------------------------------*/

    .state('app.diningitem', {
      url: "/diningitem/:diningId",
      views: {
        'menuContent' :{
          templateUrl: "templates/diningitem.html",
          controller:'diningdetailCtrl'
        }
      }
    })

    /*---------------------------------DINING ITEM----------------------------------------*/



    .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlist.html",
          controller: 'PlaylistCtrl'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');
});

这就是我想要做的。

1.当我点击侧边菜单QUIZ时，测验页面被加载

2.这里我想使用TAB菜单

Answer 1

您可以使用 Striped Style Tabs。它可以满足您的确切需求，并且只需少量 CSS 调整，您就可以让它看起来像您发布的那样。在此处查看官方文档 (http://ionicframework.com/docs/components/#striped-style-tabs)