【ionic App問題まとめシリーズ】ionic下部メニューバーを隠すion-tabs

前言

ionicでは、下部メニューバーion-tabsのページ内の表示と非表示を制御する属性は提供されておらず、クラス.tabs-item-hideが1つしか制御できないので、.tabs-item-hideの追加を制御することで、メニューバーを非表示にする目的を実現することができます.

インプリメンテーションモード

3つのステップで実現できます

最初のステップは、ion-tabs命令にhideTabsを追加する

<ion-tabs class="tabs-icon-top tabs-assertive {{hideTabs}}" >
ion-tabs>

ステップ2:hideTabs命令を書く

次の命令は、ionicViewブロードキャストの$ionicView.beforeEnter、$ionicView.beforeLeave、および$destroyをリスニングし、ビューが入る前および離れる前にhideTabsの属性をリスニングし、.tabs-item-hideを追加する.そして、Viewが破棄されたとき、すなわちページが戻ったときに、hideTabsをfalseとする.命令コードは次のとおりです.

/**
   *   tabs  
   * 
   */
  .directive('hideTabs', function ($rootScope) {
    return {
      restrict: 'A',
      link: function (scope, element, attributes) {
        scope.$on('$ionicView.beforeEnter', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = 'tabs-item-hide';
          });
        });
        scope.$on('$ionicView.beforeLeave', function () {
          scope.$watch(attributes.hideTabs, function (value) {
            $rootScope.hideTabs = 'tabs-item-hide';
          });
          scope.$watch('$destroy', function () {
            $rootScope.hideTabs = false;
          })
        });
      }
    };
  })

ステップ3:tabページにコマンドhide-tabsを追加する

次に、メニューバーを隠す必要があるページに、次のコードのようなhide-tabs・コマンドを追加します.

<ion-view hide-tabs>
//    
ion-view>

これにより、下部のメニューバーを隠すことができます.
文章は私の個人ブログに先発します:www.iamsuperman.cn