Onsen UI-删除新页面上的选项卡

Onsen UI - Delete tabbar on new page

本文关键字：选项 新页面 UI- 删除 Onsen      更新时间：2023-12-22

我正在开发一个带有登录过程的应用程序。

我的第一页是index.html

 <body ng-controller="AppController">
        <script src="scripts/index.js"></script>
        <ons-tabbar var="menu">
            <ons-tab page="login.html" label="Home" icon="ion-home" active="true"></ons-tab>
            <ons-tab page="register.html" label="Über uns" icon="ion-ios-cog"></ons-tab>
        </ons-tabbar>
        <ons-template id="login.html">
            <ons-navigator animation="slide" var="app.navi">
                <ons-page ng-controller="PageController">
                  <ons-toolbar>
                    <div class="center">Anmelden</div>
                  </ons-toolbar>
                    <div class="login-form">
                        <input type="text" ng-model="loginEmail" class="text-input--underbar" placeholder="E-Mail" value="">
                        <input type="password" ng-model="loginPassword" class="text-input--underbar" placeholder="Passwort" value="">
                        <br><br>
                        <ons-button modifier="large" ng-click="login()" class="login-button">Anmelden</ons-button>
                        <br><br>
                        <ons-button modifier="quiet" ng-click="app.navi.pushPage('register.html');" class="register">Noch kein Mitglied ?</ons-button>
                        <ons-button modifier="quiet" ng-click="app.navi.pushPage('lostpasswort.html');" class="forgot-password">Passwort vergessen ?</ons-button>
                    </div>
                </ons-page>
            </ons-navigator>
        </ons-template>
        <ons-template id="register.html">
            <ons-page>
              <ons-toolbar>
                <div class="left"><ons-back-button>Zurück</ons-back-button></div>
                <div class="center">Registrieren</div>
              </ons-toolbar>
                <div class="login-form">
                    <input type="text" class="text-input--underbar" placeholder="Vorname" value="">
                    <input type="text" class="text-input--underbar" placeholder="Nachname" value="">
                    <input type="email" class="text-input--underbar" placeholder="E-Mail" value="">
                    <input type="password" class="text-input--underbar" placeholder="Passwort" value="">
                    <input type="password" class="text-input--underbar" placeholder="Passwort bestätigen" value="">
                    <br><br>
                    <ons-button modifier="large" class="login-button">Registrieren</ons-button>
                </div>
            </ons-page>
        </ons-template>
        <ons-template id="lostpasswort.html">
            <ons-page>
              <ons-toolbar>
                <div class="left"><ons-back-button>Zurück</ons-back-button></div>
                <div class="center">Registrieren</div>
              </ons-toolbar>
                <div class="login-form">
                    <input type="email" class="text-input--underbar" placeholder="E-Mail" value="">
                    <br><br>
                    <ons-button modifier="large" class="login-button">Neues Passwort senden</ons-button>
                </div>
            </ons-page>
        </ons-template>

        <ons-template id="about.html">
          <ons-toolbar>
            <div class="center">Über uns</div>
          </ons-toolbar>
          <ons-page>
            <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
          </ons-page>
        </ons-template>
    </body>

登录成功后，我想更改页面(main.html)。这是有效的，但index.html中的选项卡栏也显示在新页面中。

如何删除旧的选项卡并在新页面中设置新的选项卡？

谢谢！

我认为你可以使用ng-if。登录您的操作后，您会发送一个viewbag标志，然后如果您想看或不想看哪个选项卡栏，则使用ng

<div class="tabbable tabs-left" role="tabpanel" ng-if="'@ViewBag.tabId'=='p'">
  <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">Basic</a></li>
  </ul>
</div>

`

基本上，如果你想导航到一个没有选项卡的页面，那么选项卡应该在导航器内部，而不是相反。

<ons-navigator animation="slide" var="app.navi">
    <ons-tabbar var="menu">
        <ons-tab page="login.html" label="Home" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="register.html" label="Über uns" icon="ion-ios-cog"></ons-tab>
    </ons-tabbar>
</ons-navigator>

导航器目前的情况实际上是在登录名内部，这使得导航有些奇怪。如果用户单击"注册"选项卡，则他将转到该选项卡，但如果单击"注册按钮"，则他仍将在"登录"选项卡中，但选项卡的内容将发生更改。在一种情况下，他会看到幻灯片动画，而在另一种情况中，它只会更改内容。

如果你只选择一种导航到特定页面的方式，也许会更好。

  • 如果使用选项卡，则可以使用选项卡中的方法loadPage和setActiveTab来处理身份验证页面。对于之后的其他页面，您可以使用导航器的方法
  • 如果你喜欢使用导航器，那么也许你可以使用嵌套导航器。一个用于主导航，一个用于auth页面（可以在主导航器中加载一个auth.html，在auth.html中加载另一个导航器）
  • 最后，如果您只删除选项卡，并且只有一个导航器，您可以进一步简化事情。这可能是最容易导航的

此外，如果你认为这些选项都不够好，并且你对如何最容易做到有了更好的想法，那么可以在onsenui repo上写一个功能请求。

相关文章：