【爬坑记录】小程序自定义实现底部导航custom-tab-bar

对于刚接触小程序的小白来说，总是难免会遇到各种坑，唯独只有记录下来踩坑的过程，才能在后期避免在同一个地方不断的跌倒。tabbar导航是最常见的展现形式，但是为了展现自己独有的特色，往往会设计的稍微与众不同，首先要实现通用的tabbar效果，其次还要有个性化的样式，这就难到刚接触的大部分人。 刚接触小程序只能在网上搜索，其次翻阅官方文档，目前感觉官方文档部分还是稍微有点乱，每次想找个接口或者组件，总感觉不只一个地方，就比如这个tabbar。
原始的tabbar属于扩展能力：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
自定义的tabbar却在指南里：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 

对于新手来说这样的操作完全不适应，也搞不懂为什么不能放在一起，明明就是一类东西及他的扩展，哎，一家独大的东西只能去适应。

直接上自定义tabbar：

一、按照官方的定义，首先需要在app.json里配置tabbar数据，官方的标准直接看以上链接就可以，自己通过尝试，发现只要配置最重要的配置就可以：

 "pages": [
    "pages/logs/logs", 
    "pages/index/index", 
    "pages/user/user", 
    "pages/list/list"
  ],
  "tabBar": {
    "custom": true,   //自定义tabbar必须指定当前属性为true
    "list": [   
      {
        "pagePath": "pages/logs/logs"
      },
      {
        "pagePath": "pages/list/list"
      },
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/user/user" 
      }
    ]
  },
  "usingComponents": {}

需要在页面展现的tabbar对应的页面，必须在这里进行配置，否则点击tab切换会报错：
switchTab:fail can not switch to no-tabBar page

意思就是要切换的页面没有在tabbar里进行配置，所有页面也必须在pages里面进行配置。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

二、在根目录新建目录 custom-tab-bar , 目录下面建立 index.js , index.wxss , index.json , index.wxml , 名字必须是这样的，不能定义其他的，至于为什么，目前不知道。

index.wxml

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

index.wxss

/* custom-tab-bar/tabbar.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

index.js

// custom-tab-bar/tabbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    selected: 0,
    color: "#f60",
    selectedColor: "#3cc51f",
    color: "#7A7E83",
    "selectedColor": "#f00",
    "borderStyle": "black",
    backgroundColor: "#ffffff",
    list: [
      {
        pagePath: "/pages/logs/logs",
        text: "首页",
        iconPath: "/image/icon_API.png",
        selectedIconPath: "/image/icon_API_HL.png"
      },
      {
        "pagePath": "/pages/user/user",
        text: "用户",
        iconPath: "/image/icon_component.png",
        selectedIconPath: "/image/icon_component_HL.png"
      }, {
        pagePath: "/pages/list/list",
        text: "列表",
        iconPath: "/image/icon_API.png",
        selectedIconPath: "/image/icon_API_HL.png"
      },
      {
        "pagePath": "/pages/index/index",
        text: "会员中心",
        iconPath: "/image/icon_component.png",
        selectedIconPath: "/image/icon_component_HL.png"
      }
     
    ]
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      console.log("切换index>>>"+data.index);
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  }
})

这个页面必须配置完整的数据，tabbar展示的数据从这里的list获取，switchTab方法就是切换tab事件，都很容易看懂，就不详细说明。

三、在pages里建立对应的tab切换页面，就是第一步配置的页面，必须存在。(页面的位置不一定要在pages里，可以自己归纳，只要配置路径正确就可以)

基础的搭建到此为止，可以运行起来了，编译试试，会发现，tabbar效果有了，但是切换的时候，第一次点击tab页面切换了，但是tab图标和文字颜色效果没有变化，点击第二次才会有效果，这个应该是点击之后没有在tab页面设定tabbar的 select index，不知道是不是bug，这里需要在每一个tab页面的onShow里添加如下方法：

onShow: function () {
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3     //这里的数字设置当前页面在tabbar里对应的序列，从0开始
      })
    }
  }

此时再次编译，大功告成。

四、如果需要导航样式个性化处理的，可以修改index.wxml ， index.wxss 结合数据状态进行操作，譬如：

这里因为只是修改页面和样式文件，每家都不一样，就不展示代码了。