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>
```
