当前位置:主页 > 微信开发 > WeUI >

微信网页开发基础组件底部导航Tabbar

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-04
  在一个微信小程序和公众号里面可能没有顶部导航,但是,一个小程序或公众号里面一定会有底部导航的,所以,无论是公众号开发者还是小程序开发者一定会使用底部导航组件tabbar。

示例

底部导航

简洁示例代码

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


  底部导航tabbar 与顶部导航navbar的结构正好相反,顶部导航的导航条在顶部,主体区域在导航的下面,而底部导航的导航条在底部,而主体区域在上面。

  但是,底部导航要比顶部导航复杂一点,因为,在底部导航一般都有一个图标,然后,在图标下面是一个简短的文字说明。

完全的示例代码:

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

底部和项部导航比较:

  为了方便的理解项部导航和底部导航,现把这两个导航的结构及使用的css类进行对比分析,从中可以更好的理解导航及其在微信中的使用。

  1) 底部导航最外层跟顶部导航一样都是weui-tab。

  2)底部导航的导航选项的最外层类是weui-tabbar,顶部导航的导航选项的最外层类是weui-navbar。

  3)在导航选项里面使用的选项的类底部和顶部分别是:weui-tabbar__item 和 weui-navbar__item

  4) 底部和顶部导航在用户激活时的类分别是:weui-bar__item_on 和 weui-bar__item_on

  5) 因为,底部导航是由图标和文本组成的,所以,在底部导航里面有图标和文本类:weui-tabbar__icon 和 weui-tabbar__label,这个是顶部导航里面是没有的。