WEUI的tabbar注意事项

来源：互联网发布：手机编程输入法编辑：程序博客网时间：2024/04/28 22:34

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

0 0