ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。 ![image](https://cloud.githubusercontent.com/assets/4652816/13284130/41649ffc-db2d-11e5-8872-319be7424b34.png) `.weui-navbar` 通常作为 `.weui-tab` 子元素、`.weui-tab__panel` 的兄弟元素一起使用。结构为: ```html <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-tab__panel` 作为 tab 的主体内容,占据除了 `.weui-navbar` 以外的全部父容器的高度,`.weui-navbar` 则为底部的导航栏。而 `.weui-navbar__item` 为 `.weui-navbar` 的子元素,表示一个导航区,建议不超过 5 个。 另外,需要给当前激活的 `.weui-navbar__item` 元素添加 `.weui-bar__item_on` 类,来标示当前高亮的条目。