Tabbar
Tabbar 是位于页面底部的导航,相当于 App 的Dock 栏,通过点击每个按钮切换页面的主体内容。
<div class="weui-tab">
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<h1>页面一</h1> </div>
<div id="tab2" class="weui-tab__bd-item">
<h1>页面二</h1> </div>
<div id="tab3" class="weui-tab__bd-item">
<h1>页面三</h1> </div>
<div id="tab4" class="weui-tab__bd-item">
<h1>页面四</h1> </div>
</div>
<div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
<div class="weui-tabbar__icon"> <img src="./images/icon_nav_button.png" alt=""> </div>
<p class="weui-tabbar__label">微信</p>
</a>
<a href="#tab2" class="weui-tabbar__item">
<div class="weui-tabbar__icon"> <img src="./images/icon_nav_msg.png" alt=""> </div>
<p class="weui-tabbar__label">通讯录</p>
</a>
<a href="#tab3" class="weui-tabbar__item">
<div class="weui-tabbar__icon"> <img src="./images/icon_nav_article.png" alt=""> </div>
<p class="weui-tabbar__label">发现</p>
</a>
<a href="#tab4" class="weui-tabbar__item">
<div class="weui-tabbar__icon"> <img src="./images/icon_nav_cell.png" alt=""> </div>
<p class="weui-tabbar__label">我</p>
</a>
</div>
</div>
Tabbar 的 class 为weui_tabbar, 一般嵌套在 weui_tab 内,weui_tab_bd 为 Tab 页面的主体内容,weui_tabbar_item 为 Tabbar 的一个一个的按钮,建议为 3~5 个,weui_tabbar_icon 为每个按钮的图标,weui_tabbar_label 为图标下面的字,Active 状态可以使用 weui_bar_item_on 样式。 注意,你这样写完后会发现 Tabbar 位于页面最顶端,这是因为 WeUI 没有定义 html, body 的高度,所以给其定义个 height: 100%; 就可以了!
html,body{height: 100%;}