前言

微信小程序本身提供的app.json中配置tabbar或是自定义tabbar的写法都没有突出效果的，所以想要个性化样式，需要自定义tababr
gitee项目地址

效果展示

使用圈子记账微信小程序为例

选中状态
未选中状态

开发过程

参考微信公众平台小程序指南中的自定义tabBar构建过程

第一步：配置信息

• 在app.json中的tabbar项指定custom字段，定义为true，允许使用自定义tabBar
  app.json配置

第二步： 添加自定义tabBar代码文件

• 在代码根目录下添加入口文件，文件名字： custom-tab-bar
  注意：一定创建在根目录下，跟app.json在同一层级，文件名字必须是 custom-tab-bar
  文件目录

第三步： 编写自定义tabBar代码

• 用自定义组件的方式编写即可，该自定义组件完全接管tabBar的渲染

WXML

navigator导航的使用，进行跳转
wxml结构: tabbar_box —>tabbar_nav —>image + text
逻辑实现：
1.首先判断是否是isSpecial，进行图标突出渲染和普通渲染
2.再判断是否为选中状态： selected === index

js

1.在data中定义tabbar相关数据(可以拷贝定义在app.json中的tabbar配置)
细节注意： 通过isSpecial来标记突出的选项

 data: {
    "selected": 1,
    "backgroundColor": "#ffffff",
    "color": "#cdcdcd",
    "selectedColor": "#FFBE00",
    "list": [{
      "pagePath": "/pages/statistics/statistics",
      "text": "统计",
      "iconPath": "/assets/images/tabBar/account.png",
      "selectedIconPath": "/assets/images/tabBar/account_active.png"
    }, {
      "pagePath": "/pages/add/add",
      "text": "账单",
      "isSpecial": true,
      "iconPath": "/assets/images/tabBar/account_list.png",
      "selectedIconPath": "/assets/images/tabBar/add.png"
    }, {
      "pagePath": "/pages/profile/profile",
      "text": "我的",
      "iconPath": "/assets/images/tabBar/profile.png",
      "selectedIconPath": "/assets/images/tabBar/profile_active.png"
    }]
  }

2.通过监听在navigator上的bindtap事件switchTab，来动态修改当前选中tab的index值
细节注意： 通过data-index="{{index}}"把当前选中的tab的index传给监听事件switchTab

 methods: {
    switchTab(e){
      const index = e.currentTarget.dataset.index
      this.setData({
        selected: index
      })
    }
  }

WXSS

主要用到了 定位（fixed，relative，absolute），弹性布局flex
分析：
1.首先对父元素tabbar_box的position：fixed目的让tabbar定位在页面底部
2.再对父元素tabbar_box的display: flex;目的是让其子元素水平平均排列
3.再对tabbar_box的z-index=999;目的是让tabbar层级优选级最高
4.然后对其子元素tabbar_nav的flex: 1平均分配父元素的空间；
5.再对tabbar_nav设置为flex，flex-direction: column,让其子元素垂直排列
6.再对tabbar_nav设置relative，目的是为了其子元素image的absolute定位，做出突出效果来

第四步：实现tab选中态，要在当前页面下，通过getTabBar接口获取组件实例，并调用setData更新选中态

• 自定义组件新增 getTabBar接口，可获取当前页面下的自定义tabBar组件实例
  目的： 解决tab选中问题

// pages/statistics/statistics.js
Page({
  onShow: function(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()){
      this.getTabBar().setData({
        selected: 0
      })
    }
  }
})
// pages/add/add.js
Page({
  onShow: function(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()){
      this.getTabBar().setData({
        selected: 1
      })
    }
  }
})

// pages/profile/profile.j
Page({
  onShow: function(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()){
      this.getTabBar().setData({
        selected: 2
      })
    }
  }
})

踩坑填坑过程

1.因为app.json中tabBar配置项无法满足tabBar的个性定制.(比如：图标的突出效果)
2.所以尝试官方提供的自定义tabBar方法，根据提供的代码结合自己的项目进行搭建。
3.在这个过程中，在微信开发者工具中实现了tab 图标的突出效果，但是苹果真机中却无法实现，细读官方文档才得知目前cover-view不支持overflow：visible；
4.启发： 细读官方文档的重要性，也许读第一遍不能很好的理解，但是在实践过程中通过采坑，会让你更加深刻的理解
5.所以放弃了官方自定义tabBar的方法，在网上找了好多相关tabbar的项目，终于在各位大佬的造轮子的基础上，给了自己的启发，再结合官方的自定义tabbar，写出了自己的custom-tab-bar
期间用时3天左右！！！

尾声

到此我们就实现了突出效果，首先感谢大佬提供的轮子，在他们的基础上进行了改变，如果侵权，请联系我，我会第一时间删除本文章。