Skip to content
jf edited this page Feb 26, 2016 · 2 revisions

Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。

image

.weui_navbar 通常作为 .weui_tab 子元素、.weui_tab_bd 的兄弟元素一起使用。结构为:

<div class="weui_tab">
    <div class="weui_navbar">
        
    </div>
    <div class="weui_tab_bd">

    </div>
</div>

.weui_tab 作为外层容器,高度撑满它的父容器的高度,.weui_tab_bd 作为 tab 的主体内容,占据除了 .weui_navbar 以外的全部父容器的高度,.weui_navbar 则为底部的导航栏。而 .weui_navbar_item.weui_navbar 的子元素,表示一个导航区,建议不超过 5 个。

另外,需要给当前激活的 .weui_navbar_item 元素添加 .weui_bar_item_on 类,来标示当前高亮的条目。

完整的组件代码如下:

<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_bd">

    </div>
</div>

注意: navbar 组件是从 v0.4.0 开始加入的,更旧的版本不包含该组件,请使用 v0.4.0 及以上版本的 WeUI。

Clone this wiki locally