小程序如何实现自定义tabBar

背景

由于微信默认的tabbar是官方组件，有最高的优先级，因此我们自己组件的遮罩层无法覆盖他们。为了解决这个问题，我们可以使用微信提供的自定义tabBar功能。
​

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
​

实现效果：
​

实现方式

1. 在项目根目录下创建custom-tab-bar组件，文件名为index，如图

​

2. 在app.json中把tabBar设置为自定义，这里的list必须要定义，否者会报错

​

3. 编写tabbar代码

​

wxml

  
    
    {{ item.text }}
  

js

Component({
  data: {
    selected: 0,
    list: [
      {
        "iconPath": "/static/tabbar/index.png",
        "selectedIconPath": "/static/tabbar/index2.png",
        "pagePath": "/pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "/static/tabbar/activity.png",
        "selectedIconPath": "/static/tabbar/activity2.png",
        "pagePath": "/pages/find/find",
        "text": "活动"
      },
      {
        "iconPath": "/static/tabbar/mall.png",
        "selectedIconPath": "/static/tabbar/mall2.png",
        "pagePath": "/pages/pageConfig/configIndex",
        "text": "商城"
      },
      {
        "iconPath": "/static/tabbar/my.png",
        "selectedIconPath": "/static/tabbar/my2.png",
        "pagePath": "/pages/my/my",
        "text": "我的"
      }
    ]
  },

  methods: {
    handleClick(e) {
      let path = e.currentTarget.dataset.path;
      let index = e.currentTarget.dataset.index;
      wx.switchTab({ url: path })
      this.setData({ selected: index })
    }
  }
});

wxss
特别说明：自定义的tabbar层级默认为9999（非官方说明，自己测出的结果），我这里使用的less，会编译为wxss。

.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }
  &__text {
    font-size: 10px;
  }

  &__active {
    .bar__text {
      color: #487271;
    }
  }
}

json

{
  "component": true,
  "usingComponents": {}
}

完成上面的步骤，tarbar组件就写完了，接下来是使用了
​

使用自定义tabBar

这个组件不需要手动注册，在list中定义的页面会自动加载这个组件。但是需要通过下面的方法手动指定高亮的选项：
​

// 建议在onShow方法中调用，selected 值为索引值
onShow() {
  this.getTabBar().setData({ selected: 0 })
}

处理padding值

由于使用了自定义tabbar，因此需要对使用tababr的页面设置下内边距，以防止内容被覆盖。可以在app.wxss中定义一个全局样式，然后在对应的页面添加这个类名即可。
​

.global__fix_tabbar {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

​

最终效果

我们的小程序使用vant-weapp组件库，对于popup组件，设置更高的层级，就可以覆盖tabbar了
​

效果如图：
​