Ionic Framework nasconde le schede su una pagina specifica

Question

Utilizzo il framework ionico e ho creato una nuova applicazione di tabulazione.

Quello che devo fare è avere una pagina come predefinita o home page che non ha le schede e poi tutte le altre per avere le schede come al solito.

Come una pagina di destinazione.

Come posso fare questo?

Answer 1

Nelle versioni recenti ionici, ciò si ottiene facilmente impostando

$ionicTabsDelegate.showBar(false); 

codice di esempio:

.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); 
     }); 
    } 
    }; 
}) 

SOURCE

Answer 2

Plunker Demo

prima definire un separato $stateProvider per l'atterraggio o la pagina di default [Penso che già definito un $stateProvider per le altre pagine] in app.js .La app.js file dovrebbe essere come questo,

app.js

var app = angular.module('myApp', ['ionic']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 
    .state('tabs', { 
     url: '/tab', 
     controller: 'TabsCtrl', 
     templateUrl: 'tabs.html' 
    }) 
    .state('tabs.home', { 
     url: '/home', 
     views: { 
     'home-tab': { 
      controller: 'homeCtrl', 
      templateUrl: 'home.html' 
     } 
     } 
    }) 
    .state('tabs.settings', { 
     url: '/settings', 
     views: { 
     'settings-tab': { 
      controller: ' signOutCtrl', 
      templateUrl: 'settings.html' 
     } 
     } 
    }); 
    $stateProvider 
     .state('landing', { 
      url: '/landing', 
      controller: 'landingCtrl', 
      templateUrl: 'landing.html' 
    }); 

    $urlRouterProvider.otherwise('/landing'); 
}); 

Creare anche una pagina html per le schede.

tabs.html

<ion-view title="Home"> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> 
    </ion-nav-buttons> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 
     <ion-tab title="{{tab1Title}}" icon="ion-home" href="#/tab/home"> 
      <ion-nav-view name="home-tab"></ion-nav-view> 
     </ion-tab> 
     <ion-tab title="{{tab2Title}}" icon="ion-gear-a" href="#/tab/settings"> 
      <ion-nav-view name="settings-tab"></ion-nav-view> 
     </ion-tab> 
     <ion-tab title="{{tab3Title}}" href="#/landing" icon="ion-log-out"> 
     </ion-tab> 
    </ion-tabs> 
</ion-view> 

Inoltre è necessario nascondere <ion-nav-bar> nella tua pagina landing utilizzando hide-nav-bar="true ".

destinazione.html

<ion-view hide-nav-bar="true "> 
    <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button> 
    </ion-nav-buttons> 
    <ion-content padding="true"> 
     <h1 style="text-align: center;">Welcome To Landing Page</h1> 
     <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a> 
    </ion-content> 
</ion-view> 

Answer 3

<!-- in your tabs.html add this ng-class --> 
<ion-tabs ng-class="{'tabs-item-hide': hideTabs}"> 

</ion-tabs> 

<!-- add 'hide-tabs'in your view where you want to hide the tabs --> 
<ion-view hide-tabs> 

</ion-view> 

// in your app.js add a directive 
.directive('hideTabs', function($rootScope) { 
    return { 
     restrict: 'A', 
     link: function($scope, $el) { 
      $rootScope.hideTabs = true; 
      $scope.$on('$destroy', function() { 
       $rootScope.hideTabs = false; 
      }); 
     } 
    }; 
}) 

Answer 4

Prova questo è un semplice esempio ...

Fase 1) L'applicazione di default ha tre schede nella barra delle schede per impostazione predefinita, vale a dire casa, su e contatto . Diciamo che vogliamo nascondere la barra delle schede quando l'utente naviga verso la scheda about. Per questo, avremo bisogno di apportare modifiche al file about.ts che potete trovare a

about.ts

export class AboutPage { 
    tabBarElement: any; 
    constructor(public navCtrl: NavController) { 
    this.tabBarElement = document.querySelector('.tabbar.show-tabbar'); 
    } 

    ionViewWillEnter() { 
    this.tabBarElement.style.display = 'none'; 
    } 

    ionViewWillLeave() { 
    this.tabBarElement.style.display = 'flex'; 
    } 

Punto 2) circa.html

<ion-header> 
    <ion-navbar> 
     <ion-buttons left> 
     <button ion-button icon-only (click)="takeMeBack()"> 
      <ion-icon name="arrow-back"></ion-icon> 
     </button> 
    </ion-buttons> 
    <ion-title> 
     About 
    </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
    This is About Page Tab bar is Hidden. 
</ion-content> 
Step 3) 

about.ts

takeMeBack() { 
    this.navCtrl.parent.select(0); 
    }