如何使用Onsenui替换页面tabbar

时间:2016-02-17 08:42:36

标签: angularjs onsen-ui

当我使用myNavigator.pushPage()时,我将用户从index.html页面重定向到新页面,但是我只想从用户重定向的页面中显示标签栏,目前它显示重定向的页面主index.html标签栏下方的标签栏:

的index.html

<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="main.html">
<ons-navigator var="myNavigator">
    <ons-page ng-controller="LoginController">
        <ons-tabbar position="top">
          <ons-tabbar-item  style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
          <ons-tabbar-item page="dashboard.html"  icon="ion-ios-pulse-strong" active="true"  class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
          <ons-tabbar-item page="timeline.html"  icon="ion-android-calendar"></ons-tabbar-item>
          <ons-tabbar-item page="negative.html"  icon="ion-android-walk"></ons-tabbar-item>
          <ons-tabbar-item page="capture.html"  icon="ion-pinpoint"></ons-tabbar-item> 
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</ons-template>

Settings.html

<ons-page ng-controller="Settings">
    <ons-tabbar position="top">
        <ons-row>
            <ons-col width="15%">
               <div style="margin-top:5px"><ons-back-button> 
            </ons-back-button></div>
            </ons-col>
            <ons-col width="45%" align="left">
                <div style="padding-top:18px;color:#fff">Settings</div>
            </ons-col>
            <ons-col width="20%" align="left">

            </ons-col>            
        </ons-row>
    </ons-tabbar>

    <div class="login-form">
        <ons-row style="padding-top: 30px;padding-bottom:10px; text-align: center;">
            <ons-col>
                <div  align="center" style="padding:10px;font-size:0.8em">Update your settings below</div>
            </ons-col>
        </ons-row>         


        <ons-row style="margin-top: 20px; text-align: center;">
            <input type="email" class="text-input--underbar" placeholder="Email" ng-model="emailx" id="emailx">
            <input type="text" class="text-input--underbar" placeholder="First Name" ng-model="firstname" id="firstname">
            <input type="text" class="text-input--underbar" placeholder="Last Name" ng-model="lastname" id="lastname">
            <input type="password" class="text-input--underbar" placeholder="Password" value="" id="password">

            <p style="margin-top:15px">
            <ons-button modifier="large" class="login-button" ng-click="updateSettings();">Update</ons-button>
            </p>
        </ons-row>
    </div>

    <ons-row style="padding: 20px; text-align: center;border-bottom:1px solid #e3e3e3">
        <div  align="center"> </div> 
    </ons-row>   

    <ons-row style="padding: 20px; text-align: center;">
        <ons-col >
             <ons-button modifier="large" style="background:#ccc" ng-click="logout()">Logout</ons-button>
         </ons-col>
    </ons-row>    

</ons-page>

注意我在settings.html中有一个tabbar,现在这个显示在index.html的tabbar下面,但我想让它替换它或者当用户通过pushPage()重定向到settings.html时自己显示

0 个答案:

没有答案