WEUI的tabbar注意事项

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%;}