tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。
`.weui-tabbar` 通常作为 `.weui-tab` 子元素、`.weui-tab__panel` 的兄弟元素一起使用。结构为：
```html
<div class="weui-tab">
<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 class="weui-tabbar">
</div>
</div>
```
`.weui-tab` 作为外层容器，高度撑满它的父容器的高度，`.weui-tab__panel` 作为 tab 的主体内容，占据除了 `.weui-tabbar` 以外的全部父容器的高度，`.weui-tabbar` 则为底部的导航栏。而 `.weui-tabbar__item` 为 `.weui-tabbar` 的子元素，表示一个导航区，建议不超过 5 个。
图标 `.weui-tabbar__icon` 约定尺寸为 24px * 24px ，二倍即 48px * 48px。
关于 active 态，开发者根据需要，给当前激活的 `.weui-tabbar__item` 添加标示的 `.weui-bar__item_on` 类名，然后控制文字颜色和图标变化。
完整的组件代码如下：
```html
<div class="weui-tab">
<div class="weui-tab__panel">
</div>
<div class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">微信</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">通讯录</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">发现</p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label">我</p>
</a>
</div>
</div>
```
