Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。
.weui-navbar
通常作为 .weui-tab
子元素、.weui-tab__panel
的兄弟元素一起使用。结构为:
- <div class="weui-tab">
- <div class="weui-navbar">
- <div class="weui-navbar__item weui-bar__item_on">
- 选项一
- </div>
- <div class="weui-navbar__item">
- 选项二
- </div>
- <div class="weui-navbar__item">
- 选项三
- </div>
- </div>
- <div class="weui-tab__panel">
- <div>Page 1</div>
- <div style="display:none">Page 2</div>
- <div style="display:none">Page 3</div>
- </div>
- </div>
.weui-tab
作为外层容器,高度撑满它的父容器的高度,.weui-tabpanel
作为 tab 的主体内容,占据除了 .weui-navbar
以外的全部父容器的高度,.weui-navbar
则为底部的导航栏。而 .weui-navbar
item
为 .weui-navbar
的子元素,表示一个导航区,建议不超过 5 个。
另外,需要给当前激活的 .weui-navbaritem
元素添加 .weui-bar
item_on
类,来标示当前高亮的条目。