Question

我按照this codepen隐藏了离子标签：

<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">
    // --> my tabs go here
</ion-tabs>


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

my directives.js

.directive('hideTabs', function($rootScope, $ionicTabsDelegate) {   return {
    restrict: 'A',
    link: function($scope, $el) {
      $scope.$on("$ionicView.beforeEnter", function () {
        $ionicTabsDelegate.showBar(false);
      });
      $scope.$on("$ionicView.beforeLeave", function () {
        $ionicTabsDelegate.showBar(true);
      });
    }   }; });

它工作正常，但假设我们有第三级导航（在Chats选项卡中的chat-detail.html之后），我们称之为chat-detail-more.html。如果我们使用后退按钮返回chat-detail.html，则会显示标签栏在这种情况下是否有隐藏标签栏的想法？

Answer 1

你可以像这样使用ion-tab的“hidden”属性 -

 <ion-tabs class="tabs-icon-top tabs-color-active-positive "> 
        <ion-tab hidden="{{condition}}" title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/chats">
   </ion-tab>
        <ion-tab hidden="{{condition}}" title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login">
    </ion-tab>
</ion-tabs>

使用此功能，我们可以显示/隐藏标签。

隐藏离子离子片

1 个答案: