我搜索,并没有真正找到正确的答案。结合温泉用户界面滑动菜单和标签栏
我在左上方有'全菜单'的滑动菜单,但我也希望顶部的标签栏突出显示3或4个特定的链接/页面。我如何让他们都工作?当我将标签栏放在我的脚本中时,滑动菜单无法正常工作。
我搜索,并没有真正找到正确的答案。结合温泉用户界面滑动菜单和标签栏
我在左上方有'全菜单'的滑动菜单,但我也希望顶部的标签栏突出显示3或4个特定的链接/页面。我如何让他们都工作?当我将标签栏放在我的脚本中时,滑动菜单无法正常工作。
首先,使用TabBar元件设计成显示,默认情况下,在页面的底部:
http://onsen.io/guide/overview.html#onstabbaroverview
您可以通过使用属性position="top"
关于组合滑动菜单+ tabbar我没有任何问题将两个元素放在一起。尝试创建一个新的温泉UI滑动菜单项目和修改文件menu.html这样:
<ons-navigator>
<ons-page>
<ons-tabbar position="top">
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="fav.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorites</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-gear-a"></ons-icon>
<span style="font-size: 14px">Settings</span>
</ons-tab>
</ons-tabbar>
<div style="text-align: center">
<h1>Page 1</h1>
<ons-button
ng-click="app.slidingMenu.toggleMenu()">
Toggle Menu
</ons-button>
<p> Click "Toggle Menu" to close/open menu, </p>
<p> You can also swipe the page left/right. </p>
<img src="images/ico_swipe_right_s.png" alt="">
</div>
</ons-page>
</ons-navigator>
我想后您的屏幕,但我仍不很没有足够的声誉
我认为它是结合ons-navigator和ons-tabbar,而不是ons-sliding-menu和ons-tabbar? – Tamura 2015-01-19 10:15:31
实现滑动和tabbar没有问题。
<ons-sliding-menu
main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="fav.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorites</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-gear-a"></ons-icon>
<span style="font-size: 14px">Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page>
<p style="text-align:center">Home Page</p>
</ons-page
</ons-template>
<ons-template id="fav.html">
<ons-page>
<p style="text-align:center">Favorites page</p>
</ons-page
</ons-template>
<ons-template id="settings.html">
<ons-page>
<p style="text-align:center">Settings Page</p>
</ons-page
</ons-template>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('fav.html', {closeMenu: true})">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
希望这会有所帮助。检查我的工作codepen
我知道这已经很长时间了,但是你有答案吗?你可以选择一个最佳答案,或者你可以提供你自己的答案。问候 - Ranjith – 2015-04-28 11:59:53