如何在 Ionic 中设置带有选项卡的侧边菜单? [英] How to set up sidemenu with tabs in Ionic?

问题描述

在我看来，有一个侧边菜单，比如设置和关于页面，结合主应用程序的标签是一个非常重要和标准的应用程序界面.像 Google 的 Messenger 应用程序之类的东西就使用它.

In my opinion having a sidemenu, for things like settings and about pages, combined with tabs for the main app is a pretty essential and standard app interface. Things like Google's Messenger app use this.

我正在努力让它工作，我看到有很多关于它的问题，但很少有令人满意的信息.我已经很好地将侧边菜单与 swipeboxes 结合起来.这应该同样容易.我曾经在我的应用程序中使用 jQuery Mobile，它比 Ionic 笨重得多，但做这样的界面很容易，而且效果很好.

I'm struggling to get it working and I see there are a lot of questions about it with very little satisfactory information. I've combined a sidemenu with swipeboxes fine. This should be just as easy. I used to use jQuery Mobile for my apps, which is much more clunky than Ionic but doing an interface like this is easy and it works well.

我遇到的问题是选项卡模板无法加载到选项卡中.这可能是我遗漏的一些愚蠢的东西，但这是我的 app.js 代码片段:

The problem I'm having is the tab templates don't load into the tabs. This may be something silly I'm missing but here is my app.js code snippet:

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

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

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

.state('tab.tab1', {
      url: 'tab/tab1',
      views: {
        'tab-tab1': {
          templateUrl: 'templates/tab-tab1.html',
          controller: 'tab1Ctrl'
        }
      }
    })

.state('tab.tab-tab2', {
      url: 'tab/tab2',
      views: {
        'tab-tab2': {
          templateUrl: 'templates/tab-tab2.html',
          controller: 'tab2Ctrl'
        }
      }
    })

.state('tab.extras', {
    url: 'tab/extras',
    views: {
      'tab-extras': {
        templateUrl: 'templates/tab-extras.html',
        controller: 'AccountCtrl'
      }
    }
  })

    .state('app.about', {
      url: "/about",
      views: {
        'menuContent': {
          templateUrl: "templates/about.html",
          controller: 'aboutCtrl'
        }
      }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

侧边菜单工作正常，我可以使用它导航到关于页面或返回到选项卡.选项卡的作用是改变焦点和图标改变颜色，但模板不会加载到其中.我已经仔细检查了 url 名称.

The side menu works fine and I can navigate with it to the about page or back to the tabs. The tabs work in that they change focus and the icons change colour, but the templates don't load into them. I've tripple double checked the url names.

有人知道怎么做吗?如果我在某处犯了一个小错误并使其正常工作，我将 Codepen 将此作为如何创建这个，恕我直言，非常需要的界面的示例.

Does anyone know how to do this? If I've made a small error somewhere and get it working I'll Codepen this as an example of how to create this, imho, much needed interface.

根据要求.

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

我认为它们都匹配，不是吗?

I think they all match up, no?

注意 - 关于关于这是重复的查询；我的应用程序是一个选项卡式应用程序，在基页上有一个侧边菜单.另一个问题是关于具有一系列部分的应用程序，其中一个有选项卡.这是一个完全不同的结构.

Note - with regards to the query about this being a duplicate; my app is a tabbed app with a side menu on the base page. The other question is about an app with a series of sections, one of which has tabs. It's a different structure altogether.

推荐答案

我认为您的路由有点偏离 - 您的选项卡子状态未完全声明.你已经这样声明了

I think your routing is a bit off - your child states for the tabs aren't fully declared. You've declared them like this

.state('tab.tab1', {

...并且您从未声明父 tab 状态.因此，在声明父状态之前，它们一直处于悬置"状态.ui-router 会忽略它们，直到发生这种情况.

...and you've never declared the parent tab state. So they are left 'hanging' until the parent state is declared. ui-router will just ignore them until this happens.

试试这个

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

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

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

.state('app.tabs.tab1', {
      url: '/tab1',
      views: {
        'tab-tab1': {
          templateUrl: 'templates/tab-tab1.html',
          controller: 'tab1Ctrl'
        }
      }
    })

.state('app.tabs.tab2', {
      url: '/tab2',
      views: {
        'tab-tab2': {
          templateUrl: 'templates/tab-tab2.html',
          controller: 'tab2Ctrl'
        }
      }
    })

.state('app.tabs.extras', {
    url: '/extras',
    views: {
      'tab-extras': {
        templateUrl: 'templates/tab-extras.html',
        controller: 'AccountCtrl'
      }
    }
  })

    .state('app.about', {
      url: "/about",
      views: {
        'menuContent': {
          templateUrl: "templates/about.html",
          controller: 'aboutCtrl'
        }
      }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

在标签模板中使用 ui-sref 而不是 href 更好/更清晰 - 更容易看到某些东西映射到什么状态

And better / clearer to use ui-sref rather than href in your tabs template - easier to see what state something maps to

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

没有测试过，但我认为应该可以解决它！顺便说一句，控制台中有任何错误吗?

Not tested it but I think that should fix it! Any errors in the console BTW?

这篇关于如何在 Ionic 中设置带有选项卡的侧边菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！