Question

我正在使用一些需要具有单独页面的新功能来升级我的第一个PhoneGap应用程序。

我开始实施滑动菜单，但我很快遇到了问题。

最初的应用程序有一个ons-navigator，负责通过应用程序的所有导航。

我有2个控制器：一个LoginController和一个AppController。

我的index.html文件的结构如下所示：

<ons-sliding-menu main-page="navigator.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', {closeMenu: true})">
      Home
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page1.html', {closeMenu: true})">
      Page1
    </ons-list-item>
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page2.html', {closeMenu: true})">
      Page2
    </ons-list-item>
  </ons-list>
</ons-template>

<ons-template id="navigator.html">
    <ons-navigator title="Navigator" var="myNavigator" page="main.html">

    </ons-navigator>
</ons-template>

这是页面的导航部分。

然后我有这样的页面：

<ons-template id="login.html">  
    <ons-page ng-controller="LoginController" id="login">
        <ons-toolbar>
            <div class="center">Log In</div>
        </ons-toolbar>
        <div class="login-form">
            <input type="text" class="text-input--underbar" placeholder="Username" ng-model="email">
            <input type="password" class="text-input--underbar" placeholder="Password" ng-model="password">
            <br><br>
            <ons-button modifier="large" class="login-button" ng-click="checkLogin(email,password)" > Log In</ons-button>
            <a href="" ng-click="openRegisterPage()">Don't have an account? Register now!</a>
        </div>
    </ons-page>
</ons-template>

<ons-template id="main.html">
    <ons-page id="main" >
        <ons-tabbar>
            <ons-tab active="true" page="SP1.html">
                <div class="tab">
                    <ons-icon icon="ion-calendar" class="tab-icon"></ons-icon>
                    <div class="tab-label">SP1</div>
                </div>
            </ons-tab>

            <ons-tab page="SP2.html">
                <div class="tab">
                    <ons-icon icon="ion-checkmark" class="tab-icon"></ons-icon>
                    <div class="tab-label">SP2</div>
                </div>
            </ons-tab>

            <ons-tab page="settings.html">
                <div class="tab">
                    <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
                    <div class="tab-label">Settings</div>
                </div>
            </ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-template>

在main.html标签栏中提到的页面中，我使用 AppController ，在login.html中我使用 LoginController 。

当应用程序加载时，我有以下ons.ready函数：

ons.ready(function() {
    var storage = window.localStorage;
    if(storage.getItem("username")!=null) {
        if(storage.getItem("password")!=null) {
                myNavigator.resetToPage('main.html');
        }
    }
    else
    {
        myNavigator.resetToPage('login.html');
    }
});

我的第一个问题是，应用程序在开始时启动 AppController ，即使它不应该，所以如果缓存中没有保存的凭据，它仍会显示主要.html页面一秒钟然后转到login.html。它做了一个不必要的循环，可能是因为导航。我还没有找到原因，因为2个导航系统，我有点迷失。

第二个问题是，我不能在滑动菜单的页面上包含ons-back按钮，因为它们会出现一秒钟，然后它们会被标题重叠。

任何方式，为了清理导航系统，所以ons-sliding-menu和ons-navigation相互配合使用？

另外：我应该在我倾向于使用myNavigator.resetToPage的所有页面中包含[ons-navigator var =＆＃34; myNavigator＆＃34;]（＆＃39; page.html＆＃39; ）功能吗？

这就是Page1.html的工作原理（即在滑动菜单中）

<ons-template id="Page1.html">
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page ng-controller="AppController" ng-init="ListLoad()" id="page1">

Page1.html有一个项目列表，每个项目都是可点击的，并显示一个Details.html页面。

项目的onclick事件（有一个简单的myNavigator.resetToPage（＆＃39; details.html＆＃39;）函数）在我添加到页面之前没有工作，但在我看来它不对。

有哪些方法可以在onsen UI中澄清整个导航？

另外：有没有办法让所有页面都显示底部的标签栏？那你可以从应用程序的任何页面转到SP1.html或Settings.html吗？

Answer 1

尝试在一个应用中使用所有导航组件的道具。即使你可能没有以正确的方式做到这一点，但我想这就是你问这个问题的原因。

第一个问题是，应用程序启动了AppController

这样做是因为您已将其设置为最初加载main.html。

<ons-template id="navigator.html">
    <ons-navigator title="Navigator" var="myNavigator" page="main.html"></ons-navigator>
</ons-template>

如果你只删除page属性，一切都会好的。

第二个问题是，我不能在滑动菜单的页面上包含ons-back按钮，因为它们会出现一秒钟，然后它们会被标题重叠。

TBH我不确定我能否很好地掌握这种情况。我猜测header你的意思是ons-toolbar元素。如果它们重叠 - 为什么不把它们放在ons-toolbar内？其次这似乎是某种css问题，为此它你既没有提供html也没有提供css以便重现，所以很难真正帮助你处理这些信息。

所以我唯一可以建议的是right click→inspect element并检查情况。你还没有提到你正在使用哪个版本的Onsen UI，但我想有可能ons-backbutton是隐藏自己的，因为一些Onsen逻辑试图查看是否有一个上一页到回去吧。

任何方式，为了清理导航系统，所以ons-sliding-menu和ons-navigation相互配合使用？

好吧，因为您可以看到使用多个组件管理导航很难，我建议尝试限制自己使用较少的组件进行实际导航（最好是一个）。

我看到你正在做的事情的方式menu.setMainPage，这意味着当你这样做时，你将丢失当前页面导航器中的所有页面。然而，由于这种情况，您似乎也试图将导航器放在其他页面中。

对于这种情况，一个更简单的解决方案是 - 让滑动菜单的主页只有一页带导航器。之后，您只需致电menu.setMainPage而不是致电myNavigator.resetToPage，即可获得相同的结果。基本上，您只能使用滑动菜单访问滑动菜单，然后使用导航器进行所有导航。

另外：我应该在我倾向于使用myNavigator.resetToPage的所有页面中包含[ons-navigator var =＆＃34; myNavigator＆＃34;]（＆＃39; page.html＆＃39; ）功能吗？

如果您想使用myNavigator，您应始终使用导航器进行访问。这就是为什么在我的建议中将其放在页面Page1，Page2等之外，然后只是在导航器中。（{1}}中始终有navigator.html，但只会将导航器的内容更改为sliding-menu，Page1等。

有哪些方法可以在onsen UI中澄清整个导航？

基本上我们有几个导航组件。它们中的每一个都相当简单，提供一种或两种方法来在页面内部加载页面。唯一的例外是Page2。因此，通常建议使用导航器作为导航的主要组件，并使其他人如ons-navigator和sliding-menu仅用于他们带来的额外奖励（滑动侧和标签栏按钮）。

如果你想拥有多层次的导航，那么这取决于你 - 只要导航结构为树而不是网页（或意大利面条），它应该仍然没问题。通常情况下，工作表和笔是您在实施之前决定此类导航的最佳朋友。

另外：有没有办法让所有页面都显示底部的标签栏？那你可以从应用程序的任何页面转到SP1.html或Settings.html吗？

正如事情变得越来越简单，我们又在表格中添加了一个复杂元素。

由于您希望在应用的任何页面上都有标签栏，这意味着应用中的每个页面都应位于标签栏内。我猜你还想要tabbar，所以我想你应该有类似sliding-menu的东西。

在这种情况下，我想到的解决方案是：

因为在您展示的代码中，您只使用ons-sliding-menu > ons-tabbar而从不使用myNavigator.resetToPage，所以您可以只删除导航器。因此，也许您只能使用pushPage作为逻辑，然后通过标签栏进行所有导航。因此，这意味着在您要加载页面的所有位置使用ons-sliding-menu > ons-tabbar之类的内容。
如果你想要你可以有一个树型导航，你可以在其中执行类似前面的操作，但区别在于你想要使用类似myTabbar.loadPage的页面的导航器。因此，您将在设置tabbar的页面和使用导航器执行某些操作之间进行选择。在此解决方案中，无论何时使用tabbar执行操作，都将丢失导航堆栈。
再次，不要使用标签栏进行导航，而是使用导航器。这样做的方法是：
1. 将pushPage作为主要html结构
2. 最初在标签栏中加载ons-sliding-menu > ons-tabbar的方式与您现在使用滑动菜单的方式相同。
3. 不要向标签提供navigator.html和active属性，而是提供page之类的内容。我想你也可以修改一些类，如果你希望它们看起来激活。

这几乎是我所有的建议。

作为结论，我建议您尝试遵循KISS principle。

Onsen UI组合导航（带有tabbar和导航器的滑动菜单）

1 个答案: