javascript - 为什么我的第二个标签页没有显示在 ONSEN UI 中

Question

我对 ONSEN UI 比较陌生，我正在使用标签栏布局，并在按下“选项”时推送到不同的页面，这是我这样做的解决方案：

<ons-navigator id="myNavigator" animation="fade" page="timer.html">
    <ons-page>
        <ons-tabbar swipeable animation='slide' position="bottom">
            <ons-tab page="classic.html" label="CLASSIC" icon="fa-smile" active>
            </ons-tab>
            <ons-tab page="drinking.html" label="DRINK" icon="fa-beer" badge="NEW">
            </ons-tab>
        </ons-tabbar>
        <ons-toolbar>
            <ons-toolbar>
                <div class="center">Truth or Dare - Unlimited</div>
                <div class="right menu">
                    <ons-toolbar-button>
                        <ons-icon icon="fa-ellipsis-v"></ons-icon>
                    </ons-toolbar-button>
                </div>
            </ons-toolbar>
        </ons-toolbar>
    </ons-page>
</ons-navigator>


<template id="classic.html">
    <ons-navigator id="myNavigator" animation="fade" page="classic.html">
        <ons-page id="classic">
            <div class="options">
                <div class="option vibrate easy">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/easy.png" class="level-img" alt="Easy">
                    <h2>Easy</h2>
                </div>
                <div class="option vibrate normal">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/normal.png" class="level-img" alt="Normal">
                    <h2>Normal</h2>
                </div>
                <div class="option vibrate hard">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/hard.png" class="level-img" alt="Hard">
                    <h2>Hard</h2>
                </div>
                <div class="option locked vibrate nightmare">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/nightmare.png" class="level-img" alt="Nightmare">
                    <h2>Nightmare</h2>
                </div>
                <div class="option locked vibrate random">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/random.png" class="level-img" alt="Random">
                    <h2>Random</h2>
                </div>
                <div class="option locked vibrate couple">
                    <ons-ripple color="#c9446c" background="#C3073F"></ons-ripple>
                    <img src="icons/couple.png" class="level-img" alt="Couple">
                    <h2>Couple</h2>
                    <p>(Dirty)</p>
                </div>
            </div>
        </ons-page>
    </ons-navigator>
</template>

<template id="drinking.html">
    <ons-navigator id="myNavigator" animation="fade" page="drinking.html">
    <ons-page id="drinking">
        <p>PAGE 2</p>
    
    </ons-page>
</ons-navigator>
</template>

没有自定义 js 用于标签栏元素。

为什么我的第二个标签栏页面上的内容不显示？我已经尝试从饮酒模板中删除 ons-navigator 但仍然没有进展，现在我被卡住了。

我究竟做错了什么？

标签： javascriptonsen-ui