在Onsen UI页面的选项卡中显示内容
在Onsen UI页面的选项卡中显示内容
提问于 2015-03-29 08:14:46
我正在构建一个单一的页面应用程序的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>回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-30 05:08:10
在这里解释了选项卡的用法：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
希望能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29327017
复制相关文章
相似问题
腾讯云开发者
