Design using tabbar outside of home

I'm thinking of using a tab bar configuration, but I don't want to display the tab bar on the first homepage (there is a link).
I would like to use the taboos bar on all other pages, but is there any way to set it up well?

monaca

2022-09-30 19:09

1 Answers

I think it's moving like that, but it's a little awkward.
ngAnimate or something like that might make it look better (I'm sorry, I couldn't do that).

(function(){
    ons.bootstrap()
    .controller('mainCtrl', function($scope){
      $scope.toTabbar=function(index){
        if(index===0){
          $scope.home=true;
        } else if(index===1){
          $scope.comment=true;
        } else if(index===2){
          $scope.setting=true;
        }
        navi.pushPage('tabbar.html', {animation:'slide'});
      };
    });
})();

<head>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css"rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css"rel="stylesheet"/>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
</head>
<body>
  <ons-pageing-controller="mainCtrl">
    <ons-navigator var="navi">
      <ons-toolbar>
        <ons-toolbar-item class="center">HOME</ons-toolbar-item>
      </ons-toolbar>
      <br of >
      <div style="text-align:center">
        <ons-buttoning-click="toTabbar(0)">Home</ons-button>
        <ons-buttoning-click="toTabbar(1)">Comment</ons-button>
        <ons-buttoning-click="toTabbar(2)">Setting</ons-button>
      </div>
    </ons-navigator>
  </ons-page>

  <ons-template id="tabbar.html">
    <ons-page>
      <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="home"
            label="Home"
            page="homeNavi.html"
            active="{{home}}}">/ons-tabbar-item>
        <ons-tabbar-item
            icon="comment"
            label = "Comments"
            page="commentNavi.html"
            active="{{comment}}}">/ons-tabbar-item>
        <ons-tabbar-item
            icon="gear"
            label = "Settings"
            page="settingNavi.html"
            active="{{setting}}}">/ons-tabbar-item>
      </ons-tabbar>
    </ons-page>
  </ons-template>

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

  <ons-template id="commentNavi.html">
    <ons-navigator var="commentNavi" page="page2.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="settingNavi.html">
    <ons-navigator var="settingNavi" page="page3.html">
    </ons-navigator> 
  </ons-template>

  <ons-template id="page1.html">
    <ons-toolbar>
      <div class="left">ons-toolbar-buttonng-click="navi.popPage()">HOME</ons-toolbar-button></div>;
      <div class="center">Page1</div>
    </ons-toolbar>
    <div style="text-align:center">
      <br of >
      <ons-buttoning-click="homeNavi.pushPage('page1-2.html')">
        Push New Page
      </ons-button>
    </div>
  </ons-template>

  <ons-template id="page2.html">
    <ons-toolbar>
      <div class="left">ons-toolbar-buttonng-click="navi.popPage()">HOME</ons-toolbar-button></div>;
      <div class="center">Page2</div>
    </ons-toolbar>
    <div style="text-align:center">
      <h1>Page2</h1>
    </div>
  </ons-template>

  <ons-template id="page3.html">
    <ons-toolbar>
      <div class="left">ons-toolbar-buttonng-click="navi.popPage()">HOME</ons-toolbar-button></div>;
      <div class="center">Page3</div>
    </ons-toolbar>
    <div style="text-align:center">
      <h1>Page3</h1>
    </div>
  </ons-template>

  <ons-template id="page1-2.html">
    <ons-toolbar>
      <div class="left"><ons-back-button>Back</ons-back-button></div>
      <div class="center">New Page</div>
    </ons-toolbar>
    <div style="text-align:center">
      <br of >
      <ons-buttoning-click="homeNavi.popPage();">
        Pop Page
  	  </ons-button>
    </div>
  </ons-template>  
</body>

2022-09-30 19:09

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