Tabbar

tabbar，底部导航，通常用作 Web 应用的主界面底部导航，类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。

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

<div class="weui-tab">
    <div class="weui-tab__panel">

    </div>
    <div class="weui-tabbar">

    </div>
</div>

.weui-tab 作为外层容器，高度撑满它的父容器的高度，.weui-tab__bd 作为 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 类名，然后控制文字颜色和图标变化。

完整的组件代码如下：

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