在 Onsen UI 页面的选项卡中显示内容

Question

我正在开发一个关于温泉的单页应用程序 UI，其中定义了多个页面。其中一个页面显示了为期两天的活动的时间表，因此使用带有日期和相应每日内容的选项卡是合乎逻辑的。

考虑到我在选项卡上看到的所有教程都假设您的主要网站导航将使用选项卡，而这通常不是这种情况。

您如何在温泉中做到这一点。

这是我一直在修改的代码

<ons-template id="schedule.html">
<ons-page>
  <ons-toolbar>
    <div class="left" style="line-height: 44px">
      <ons-back-button>Back</ons-back-button>
    </div>
    <div class="center">Schedule</div>
  </ons-toolbar>

  <div style="text-align: center">
        <ons-tabbar  position="top">
            <ons-tab page="dayone.html">
                <p>Day One</p>
            </ons-tab>
            <ons-tab page="daytwo.html">
                <p>Day Two</p>
            </ons-tab>
        </ons-tabbar>

        <ons-tab active="true" page="dayone.html">
            <ul class="list">
                <li class="list__item">Registration and viewing of exhibition stands</br>8.30 – 9.00AM</li>
                <li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
            </ul>
        </ons-tab>
        <ons-tab page="daytwo.html">
            <ul class="list">
                <li class="list__item">Registration and viewing of exhibition stands</br>9.30 – 9.00AM</li>
                <li class="list__item">Welcome and Introductions<br/>9.00 – 9.10AM</li>
            </ul>
        </ons-tab>

    <br />
    <ons-button modifier="light" onclick="myNavigator.popPage()">
      Pop Page
    </ons-button>
  </div>
</ons-page>

Answer 1

这里解释tabbar的用法：http://onsen.io/reference/ons-tabbar.html#usage

您的页面 "dayone.html" 和 "daytwo.html" 应该是模板或不同的页面。像这样：

<ons-page>
    <ons-navigator var="myNavigator">
        <ons-toolbar>
            <div class="center">Main page</div>
        </ons-toolbar>
        <ons-button onclick="myNavigator.pushPage('schedules.html');">Go to schedules</ons-button>
    </ons-navigator>
</ons-page>

<ons-template id="schedules.html">
    <ons-page>
        <ons-tabbar>
            <ons-tab page="day1.html" active="true">
                <ons-icon icon="ion-home"></ons-icon>
                <span style="font-size: 14px">Day 1</span>
            </ons-tab>
            <ons-tab page="day2.html">
                <ons-icon icon="ion-star"></ons-icon>
                <span style="font-size: 14px">Day 2</span>
            </ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-template>

<ons-template id="day1.html">
    <ons-page>
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Day 1 schedule</div>
        </ons-toolbar>
        <p>Day 1 activities here...</p>
    </ons-page>
</ons-template>

<ons-template id="day2.html">
    <ons-page>
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Day 2 schedule</div>
        </ons-toolbar>
        <p>Day 2 activities here...</p>
    </ons-page>
</ons-template>

这里的工作示例：http://codepen.io/frankdiox/pen/bNZMPg

希望对您有所帮助！

在 Onsen UI 页面的选项卡中显示内容

Displaying content in tabs on Onsen UI page

onsen-ui