javascript - Onsen 在同一页面上使用导航器和侧边栏

Question

我是 OnsenUI 的新手。我正在尝试显示一个使用导航器的页面，并且我还想在同一页面上有一个侧边栏。根据文档，这是可能的，但我正在努力让它发挥作用。我目前有这个:

<ons-sliding-menu var="sidebar" main-page="index.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-navigator title="Navigator" var="mainNavigator">
    <ons-page id="home-page">
        <ons-toolbar>
            <div class="center">TITLE</div>
        </ons-toolbar>
        <ons-list id="main-list">
        </ons-list>
    </ons-page>
</ons-navigator>

<ons-template id="menu.html">
    <ons-page>
        <h1>Sidebar</h1>
    </ons-page>
</ons-template>

但是，这不会显示侧边栏或提供侧边栏功能。我找不到任何关于如何执行此操作的文档。有什么想法吗？

Answer 1

是的，这是可能的。以下应该是您的 index.html 内容:

index.html:

<ons-sliding-menu var="sidebar" main-page="main.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>

<ons-template id="main.html">
<ons-navigator title="Navigator" var="mainNavigator">
    <ons-page id="home-page">
        <ons-toolbar>
            <div class="center">TITLE</div>
        </ons-toolbar>
        <ons-list id="main-list">
        </ons-list>
    </ons-page>
</ons-navigator>
</ons-template>

<ons-template id="menu.html">
    <ons-page>
        <h1>Sidebar</h1>
    </ons-page>
</ons-template>

或查看温泉文档: http://onsenui.io/guide/components.html#ons-sliding-menu

有了它，您可以在以下位置看到他们是如何做到的: http://codepen.io/onsen/pen/IDvFJ