1

Onsen UIを使用してアプリの作成しています。
トップページはタブバーを表示させないで、それ以外のページにタブバーを表示させたいと思っています。

トップページはhide-tabsを使用してタブバーを非表示にしたのですが、非表示にしたタブバーを表示するにはどうしたらよいでしょうか?

非表示

宜しくお願いします。

3 件の回答 3

1

うーん、こんな感じなんですかね。

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>

<body ng-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 />
      <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 />
    <ons-button ng-click="pop();">
  	Pop Page
  	</ons-button>
  </div>
</ons-template>

0

ご回答をありがとうございました。

お陰様で上手くできました。

トップページはリストで、タブのHOMEボタンでトップに戻りたかったので、下記のようにしました。

<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>
<body ng-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 modifier="chevron" ng-click="push(1);">page1</ons-list-item>
        <ons-list-item modifier="chevron" ng-click="push(2);">page2</ons-list-item>
        <ons-list-item modifier="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 />
        TEST1
    </div>
</ons-template>


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


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

既に解決済みだと思いますが、

tabbar.setTabbarVisibility(true);

ドキュメントには無いので、正当な手段ではないかもしれませんが。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。