Question

我需要在我的Ionic应用程序项目的同一屏幕上实现sidemenu和tabs。

它正在工作（差不多）。我希望我的底部标签始终可见，但我也希望能够从侧面菜单导航到其他（然后选项卡）视图。它应该保持所有标签菜单可见，但所有项目都处于非活动状态。

我的州定义：

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

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/base.html'
  })

  .state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only.
    url: '/locations',
    views: {
      'menuContent': {
        templateUrl: 'templates/views/locations.html',
        controller: 'LocationsCtrl'
      }
    }
  })

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

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

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

  $urlRouterProvider.otherwise('/app/home');

});

我的base.html模板：

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>

    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view> <!-- IS IT OK?? -->

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

      <ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home">
        <ion-nav-view name="tab-home"></ion-nav-view>
      </ion-tab>

      <ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history">
        <ion-nav-view name="tab-history"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive">
        <ion-nav-view name="tab-messages"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item class="item item-divider">Location: B17726</ion-item>
        <ion-item menu-close href="#/app/locations">
          Login
        </ion-item>
        <ion-item menu-close>
          Search
        </ion-item>
        <ion-item menu-close>
          Browse
        </ion-item>
        <ion-item menu-close>
          Playlists
        </ion-item>
        <ion-item class="item item-divider">
          General
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

基本上，我希望底部标签始终可见，其项目的事件没有激活。单击其中一个选项卡时，我想将其显示为正常。

Answer 1

如果可以的话会评论（没有代表性的问题），但这里是我正在向下看的曲目，如果这对你有所帮助或给你一点启发。我也试图解决这个问题。

以下是关于Ionic论坛的类似问题：http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

最后一条评论提到了一个名为$ ionicTabsDelegate的Angular方法，该方法使用一个名为showBar（show）的方法，该方法在是否显示标签栏时采用布尔值。

参考：http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/

这是我目前制作的代码，虽然它似乎不起作用（希望它接近）？

<强>的index.html

<ion-content class="side-menu-left" ng-controller="AppCtrl">
  <ion-list <!--Irrelevant Stuff Here-->>
    <ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close>
      <i class="icon ion-information-circled"></i>About Us</ion-item>

  <!-- More Menu Items Here etc. -->

<强> controllers.js

.controller('AppCtrl', function($scope, $ionicTabsDelegate) {

    $scope.showTabs = function() {
        $ionicTabsDelegate.showBar(true);
    };
});

编辑：这是关于此主题的另一个Ionic论坛帖子以及似乎是一个有效的Codepen示例。

forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
codepen.io/gnomeontherun/pen/tbvdH

离子 - 侧面菜单和标签

1 个答案: