当前位置: 首页 > 文档资料 > WeUI 帮助文档 >

Navbar

优质
小牛编辑
149浏览
2023-12-01

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

image

.weui-navbar 通常作为 .weui-tab 子元素、.weui-tab__bd 的兄弟元素一起使用。结构为:

<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>
</div>

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

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