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

微信网页开发基础组件顶部导航Navbar

栏目:WeUI 来源: 微信小程序开发网 阅读: 2017-04-04
  在微信小程序里面很多的小程序在顶部一般都有一个导航,特别是像购物类的小程序因为数据量非常大,分类非常多所以,在这样类型的小程序里面都有一个项部导航,官方建议不要超过5个导航。

  导航的好处就像网站里面的导航一样,把重要的分类放在导航里面,这样做的目的是为了方便分类查找资料,网站是这样小程序也是一样。

  在我们以后做小程序开发时,很可能会遇到类似的小程序顶部导航开发,WeUI框架已经帮助我们写好了顶部导航,我们只需要拿过来用即可。

  项部导航Navbar与底部Tabbar导航用法类似。

示例:


示例代码:

<div class="weui-tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">
            选项一
        </div>
        <div class="weui-navbar__item">
            选项二
        </div>
        <div class="weui-navbar__item">
            选项三
        </div>
    </div>
    <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>

  上面例子是一个完整的带有顶部导航的网页,您可以理解为微信小程序的某一个网页,一个小程序的网页可以分为导航区和主体区,在导航区是用来显示不超过5个的导航,而在主体区则是显示这个小程序网页的具体内容的。

  也就是说如果不包括底导航的话,一个小程序网页如何有顶部导航的话,我们可以把这个网页分为两大部分,即导航区和主体区,把这两大部分包裹起来的,是类.weui-tab,这个类是这两个部分的外层容器。

  weui-navbar是导航选择卡的外部容器,所有的选项都包括在这个类所在的容器里面。

  每一个具体的选项都在由weui-navbar__item类所在的div容器里面。

  整个主体区即除导航外的所有区域,高度为除导航外的高度,即在类 .weui-tab__panel 所在的容器里面。
 
  当用户选中一个导航选项时,可以使用类 .weui-bar__item_on来表示激活后的选项,也就是颜色#EAEAEA 。


源代码分析:

  实际上这个导航组件的源码比较简单,只需要知道下面的几个类的css源码即可。

  .weui-navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
    background-color: #FAFAFA;
}

  这个类.weui-navbar 最重要的是使用的flex弹性布局,宽度100%,只要知道这两个样式设置即可。

.weui-navbar__item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13px 0;
    text-align: center;
    font-size: 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

  在类.weui-navbar__item 里面重要的内容就是显示方式为block块,以及flex值为1,表示导航选项为等比例缩放,这样就实现了选项的自适应。

.weui-navbar__item:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #CCCCCC;
    color: #CCCCCC;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}


  这行代码的作用是在每个选项的后面加一个右边框。

.weui-tab__panel {
    box-sizing: border-box;
    height: 100%;
    padding-bottom: 50px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


  这个类里面主要的是height高度值为100%,只要把这几个类里面的上面点出来的几个选项弄明白,那么,整个导航就掌握了。