Question

我尝试过按钮和列表，但无论出于何种原因，我都无法从标签页中将页面推送到导航器堆栈。话虽如此，我是Onsen的新手，可能很容易搞砸了。我已经按照这些示例进行操作，只需执行选项卡导航或只执行导航器，但不是两者都可以。这个问题很相似，但没有解决我的问题：Onsen UI Pagination: navigator and tabbar

以下代码无效。任何帮助是极大的赞赏！ login.html页面位于根www文件夹中，我使用的是Monaca云IDE。

<body>
<ons-tabbar position="bottom">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="fa-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="gameon.html">
    <ons-icon icon="fa-bullseye"></ons-icon>
    <span style="font-size: 14px">Game On!</span>
  </ons-tab>
  <ons-tab page="progress.html">
    <ons-icon icon="fa-line-chart"></ons-icon>
    <span style="font-size: 14px">Progress</span>
  </ons-tab>
  <ons-tab page="settings.html">
    <ons-icon icon="fa-gear"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  ...
</ons-template>

<ons-template id="gameon.html">
...    
</ons-template>

<ons-template id="progress.html">
...    
</ons-template>

<ons-template id="settings.html">
    <ons-navigator var="navigator">
        <ons-page>            
            <ons-toolbar>
              <div class="center">Settings</div>
            </ons-toolbar>
            <ons-button modifier="large" onclick="navigator.pushPage("login.html", { animation: "slide" });">Login</ons-button>
            <ons-list>
              <ons-list-item onclick="navigator.pushPage('login.html');" modifier="chevron">Login</ons-list-item>
              <ons-list-item>
                    Another Option
                    <ons-switch modifier="list-item" checked></ons-switch>
              </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-navigator>
</ons-template>

更新：所以在查看了Onsen 2.0的文档之后，我发现对于ons-navigator，var属性是针对angular的，我特意试图避免使用，因为我希望尽量减少开销并且只是坚持直接JS（没有框架）。所以这里的文档https://onsen.io/2/reference/ons-navigator.html让我感到困惑，因为没有方法可以引用没有var的对象。因此，似乎如果你打算使用导航器，那么你必须使用AngularJS，它与相同文档的JS参考页面相矛盾，这表明它不需要Angular，只需要Onsen loader.js。这是正确的还是我丢失了大理石？

更新2：所以在实施下面的更改后仍然无法正常工作，在我的手机上运行它，最后收到错误消息。我甚至还原到原始代码并得到相同的错误，即：

Uncaught (in promise) Error: "html" must be one wrapper element. www/lib/onsenui/js/onsenui.js: 4139

我的猜测是，这与使用和调用外部页面有关。我会尝试将所有内容都拉到独立的html页面，然后自己调用模板。谁知道???

Answer 1

我发现了这个问题。在login.html页面上，我在<style>标记之外有<ons-page>块。从错误消息中引用的JS，我能够确定有多个HTML包装器被激活。幸运的是，我可以快速解决一个愚蠢的问题！

选项卡中的<ons-navigator>未加载

1 个答案: