Question

我正在onsen UI上构建一个单页应用程序，并定义了各种页面。其中一个页面显示了为期两天的活动的时间表，因此选择日期和相应的每日内容是合乎逻辑的。

你如何在onsen 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页面上的选项卡中显示内容

1 个答案: