Ionic - как sidemenu, так и вкладки

0

Мне нужно реализовать как sidemenu, так и вкладки на одном экране в моем проекте приложения Ionic.

Он работает (почти). Я хочу, чтобы мои нижние вкладки были видимыми всегда, но я также хочу, чтобы можно было перейти к другому (затем вкладке) представлению от sidemenu. Он должен отображать все меню вкладок, но при этом все элементы неактивны.

Определение моих состояний:

.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>

В принципе, я хочу, чтобы нижние вкладки всегда были видны, событие no его элементов активно. Когда щелкнули одну из вкладок, я хочу показать ее как обычно.

Теги:
ionic-framework
tabs

1 ответ

0

Прокомментировал бы, если бы мог (без реплик), но здесь трек, который я сейчас смотрю вниз, если это помогает вам вообще или дает вам вдохновение. Я тоже пытаюсь понять это.

Здесь аналогичный вопрос на Ionic Forums: http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726

В последнем комментарии упоминается метод Angular, называемый $ ionicTabsDelegate, с помощью метода 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);
    };
});

Редактировать: Вот еще одно сообщение форума по этому вопросу вместе с тем, что кажется рабочим примером Codepen.

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню