How to Switch Between Hide-tabs in Onsen UIons-tabbar

Creating an app using the Onsen UI.
I would like to see the tab bar on other pages instead of the tab bar on the top page.

I hid the tab bar using hide-tabs on the top page, but how do I display the tab bar that I hid?

Hide

Thank you for your cooperation.

onsen-ui

2022-09-30 11:38

3 Answers

Well, it looks like this.

ons.bootstrap().controller('MainCtrl', function($scope){
  $scope.hide=true;
  $scope.push=function(){
    myNavigator.pushPage('new_page.html');
    $scope.hide=false;
  }
  $scope.pop=function(){
    myNavigator.popPage();
    $scope.hide=true;
  }
});

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js"></script>

<bodying-controller="MainCtrl">
  <ons-tabbar var="tabbar" hide-tabs="{{hide}}">
    <ons-tabbar-item
      icon="home"
      label="Home"
      page="navigator.html"
      active="true"></ons-tabbar-item>
    <ons-tabbar-item
      icon="comment"
      label = "Comments"
      page="page2.html">/ons-tabbar-item>
    <ons-tabbar-item
      icon="gear"
      label = "Settings"
      page="page3.html">/ons-tabbar-item>
  </ons-tabbar>
</body>

<ons-template id="navigator.html">
  <ons-navigator var="myNavigator" page="page1.html">
  </ons-navigator> 
</ons-template>

<ons-template id="page1.html">
  <ons-toolbar>
      <div class="center">Page1</div>
  </ons-toolbar>
  
  <div style="text-align:center">
      <br of >
      <ons-button
          ng-click="push();">
          Push New Page
      </ons-button>
  </div>
</ons-template>

<ons-template id="new_page.html">
  <ons-toolbar>
    <div class="center">New Page</div>
  </ons-toolbar>
  
  <div style="text-align:center">
    <br of >
    <ons-buttoning-click="pop();">
  	Pop Page
  	</ons-button>
  </div>
</ons-template>

2022-09-30 11:38

Thank you for your reply.

Thanks to you, I did a great job.

The top page is a list, and I wanted to go back to the top with the HOME button on the tab, so I did the following.

<script>
    ons.bootstrap().controller('MainCtrl', function($scope){
        $scope.hide=true;
        $scope.push=function(u){
            if(u=="1")myNavigator.pushPage('page1.html');
            if(u=="2")myNavigator.pushPage('page2.html');
            if(u=="3")myNavigator.pushPage('page3.html');
            $scope.hide=false;
        }
        $scope.gohome=function(){
            myNavigator.pushPage('list.html');
            $scope.hide=true;
        }

    });
</script>
</head>
<bodying-controller="MainCtrl">
    <ons-tabbar var="tabbar" hide-tabs="{{hide}}">
        <ons-tabbar-item
            icon="home"
            label="Home"
            page="navigator.html"
            ng-click="gohome();"
            active="true"></ons-tabbar-item>
    <ons-tabbar-item
            icon="comment"
            label = "Comments"
            page="page2.html">/ons-tabbar-item>
    <ons-tabbar-item
            icon="gear"
            label = "Settings"
            page="page3.html">/ons-tabbar-item>
    </ons-tabbar>
</body>

<ons-template id="navigator.html">
    <ons-navigator var="myNavigator" page="list.html">
    </ons-navigator> 
</ons-template>

<ons-template id="list.html">
    <ons-list>
        <ons-list-item modulator="chevron" ng-click="push(1);">page1</ons-list-item>
        <ons-list-item modulator="chevron" ng-click="push(2);">page2</ons-list-item>
        <ons-list-item modulator="chevron" ng-click="push(3);">page3</ons-list-item>
    </ons-list>
</ons-template>

<ons-template id="page1.html">
    <ons-toolbar>
        <div class="center">page1</div>
    </ons-toolbar>
    <div style="text-align:center">
        <br of >
        TEST1
    </div>
</ons-template>


<ons-template id="page2.html">
    <ons-toolbar>
        <div class="center">page2</div>
    </ons-toolbar>
    <div style="text-align:center">
        <br of >
        TEST2
    </div>
</ons-template>


<ons-template id="page3.html">
    <ons-toolbar>
        <div class="center">page3</div>
    </ons-toolbar>
    <div style="text-align:center">
        <br of >
        TEST3
    </div>
</ons-template>

2022-09-30 11:38

I think it has already been resolved, but

tabbar.setTabbarVisibility(true);

It may not be a legitimate measure, as it is not in the documentation.

2022-09-30 11:38

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656