小程序-导航栏

大多数的软件都会有一个甚至多个导航栏（选项卡或者Tab），开发一个完整的微信小程序，那导航栏也是必不可少的。如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面，通过设置position来使其位于顶部或者底部，可选值 bottom、top。

1.当设置 position 为 top 时，将不会显示 icon
2.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

项目主界面的tabBar是在app.json中进行设置的，和pages和window并列显示：

"tabBar": {
    "borderStyle": "black",  //tabbar上边框的颜色， 仅支持 black/white
    "position": "bottom",  //可选值 bottom、top
    "backgroundColor": "#FFFFFF",  //tab 的背景色
    "color": "gray",  //tab 上的文字默认颜色
    "selectedColor": "#DF5054",  //tab 上的文字选中时的颜色
    "list": [
      {
        "pagePath": "pages/home/home",  //页面路径，必须在 pages 中先定义
        "text": "首页",  //tab 上按钮文字
        "iconPath": "/res/icon/home_unselected.png",  //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
        "selectedIconPath": "/res/icon/home_selected.png"  //选中时的图片路径，不支持网络图片
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "/res/icon/kind_unselected.png",
        "selectedIconPath": "/res/icon/kind_selected.png"
      },
      {
        "pagePath": "pages/trolley/trolley",
        "text": "购物车",
        "iconPath": "/res/icon/cart_unselected.png",
        "selectedIconPath": "/res/icon/cart_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/res/icon/mine_unselected.png",
        "selectedIconPath": "/res/icon/mine_selected.png"
      }
    ]
  }

显示效果如下：

底部tabBar.png

其实tabBar在项目中的使用最多就是在底部，效果不够炫酷，放在顶部不大能够吸引用户的眼球和满足用户的体验，因此，顶部导航栏自定义的居多，下面就说一下自定义的流程和实现方式。先从简单的做起，仿底部导航栏并稍作修改其样式，实现顶部导航栏。
index.wxml：

  
    {{item}}
  


{{tabList[current]}}

index.wxss：

page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tablist {
  display: flex;
  background: #f5f5f5;
    height: 80rpx;
}

.tablist .item {
  flex: auto;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 11pt;
    color: #353535;
}

.tablist .item.select {
    color: #e64340;
}

.tablist .item.select::after {
    content: "";
    height: 3rpx;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background: #e64340;
}

.content{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

index.js：

Page({
    data: {
        tabList: ['首页', '活动', '我的'],
        current: 0,//当前选中的Tab项
    },

    onLoad: function () {

    },

    /**
     * Tab的点击切换事件
     */
    tabItemClick: function (e) {
        this.setData({
            current: e.currentTarget.dataset.pos
        })
    },
})

实现效果没什么难度，唯一比较吸引我的是伪类（::after），以前做Android没有接触过这个东西，感觉这个东西好拽，不仅仅是下边的选中横线，还可以用它来实现上尖角三角形和下尖角三角形，以及尖角箭头等效果，省去切图的琐事，不用在叨扰美工来切图了。贴个有助于理解的网址吧你所不知的 CSS ::before 和 ::after 伪元素用法，不懂得可自行百度理解。
看一下效果：

顶部导航栏1.png

至此，一个简单的顶部导航栏算是实现了，其细节可以更加美化，不做赘述。现在这个导航栏只是可以点击顶部的Tab来切换，若是可以划动底部内容部分联动上部切换选中，这样使用起来是不是更舒服呢，像拼多多的小程序即实现了这样的效果。
其实实现思路也简单，底部放上一个swpier，让其充满剩余的区域不就可以滑动了嘛！
index.wxml：

  
    
      {{item}}
    
  

index.wxss：

.out{
    flex: auto;
    width: 100%;
}

index.js：

    /**
     * 内容区域swiper的切换事件
     */
    contentChange: function (e) {
        this.setData({
            current: e.detail.current
        })
    },

自定义的导航栏和swiper同时使用一个current，这就将两个组件关联起来，一个变，另一个也会跟着改变。

顶部导航栏2.png

现在底部也可以划动了，初步效果实现，但是还差点feel，顶部是写死的三个，那我按照微信的来说写2-5个也是没问题的，那要是再多点，六七个或者更多呢，那都挤在里面想想都丑死。继续干！

crowd.png

那就需要把顶部导航栏外面的view换成scroll-view，可滚动视图。
orderList.wxml：

  
    
      
        
          {{item.tableName}}
        
      
    
  

  
  
    
      
        
          
            
               
            
          
        
      
    
  

orderList.wxss：

/*  顶部TabList  */

.scroll-view_H {
  background: #fff;
  height: 80rpx;
  margin: 0rpx;
  padding: 0rpx;
  position: absolute;
  z-index: 50;
  top: 0rpx;
  left: 0rpx;
  border-bottom: 1rpx solid #eee;
}

.out {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
}

.table-out {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  display: flex;
  margin: 0rpx;
  padding: 0rpx;
}

.table-name {
  width: 140rpx;
  padding: 20rpx 20rpx 14rpx 20rpx;
  color: #353535;
  font-size: 11pt;
  box-sizing: border-box;
  position: relative;
}

.table-name.active {
  padding: 20rpx 20rpx 14rpx 20rpx;
  color: #e64340;
  font-size: 11pt;
  box-sizing: border-box;
}

.table-name.active::after {
  content: '';
  background: #e64340;
  display: block;
  height: 6rpx;
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: 0rpx;
}

.table-line {
  width: 60rpx;
  height: 6rpx;
  background-color: #e64340;
  position: absolute;
  bottom: 0rpx;
  box-sizing: border-box;
}

orderList.js：

  /**
   * Table选择事件
   */
  tableSelected: function (e) {
    let pos = e.currentTarget.dataset.pos;
    let list = this.data.orderList;
    let scrollTop = this.data.scrollTop;
    this.setData({
      current: pos,
    })
    if (pos == 5) {
      this.setData({
        id: 6,
        scrollTop: 150,
      })
    } else if (pos <= 4) {
      this.setData({
        id: 0,
        scrollTop: 0,
      })
    }
  },

  /**
   * 底部滑动事件
   */
  bindChange: function (e) {
    let pos = e.detail.current;
    let list = this.data.orderList;
    this.setData({
      current: e.detail.current
    })
    if (pos == 5) {
      this.setData({
        id: 6,
        scrollTop: 150,
      })
    } else if (pos == 4) {
      this.setData({
        id: 0,
        scrollTop: 0,
      })
    }
  },

效果如下：

顶部导航栏3-1.png

顶部导航栏3-2.png

这样，一个完整的导航栏就实现了，让我感觉唯一美中不足的地方是，划动过程中导航栏底部的红线没有移动的动画，下一波可以搞一下动画效果的实现。
完善版导航栏入口