背景

因为微信默认的tabbar是官网组件，有最高的优先级，因而咱们本人组件的遮罩层无奈笼罩他们。为了解决这个问题，咱们能够应用微信提供的自定义tabBar性能。

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

实现成果：

实现形式

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

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


  1. 编写tabbar代码

wxml

<view class="bar">  <view class="bar__item {{ index == selected ? 'bar__active' : '' }}" wx:for="{{list}}" wx:key="index" bind:tap="handleClick" data-index="{{ index }}" data-path="{{ item.pagePath }}">    <image src="{{ index == selected ? item.selectedIconPath : item.iconPath }}" mode="aspectFit" class="bar__img" />    <view class="bar__text">{{ item.text }}</view>  </view></view>

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了

<!-- z-index="99999" --><van-popup  show="{{ showPhone }}"  round  custom-class="custom"  z-index="99999"  position="bottom"  bind:click-overlay="onClosePhone"  catchtouchmove="ture"> </van-popup>

成果如图：