background

Since wechat’s default Tabbar is the official component and has the highest priority, our own component’s mask layer cannot cover them. To solve this problem, we can use the custom tabBar function provided by wechat.

The official document: developers.weixin.qq.com/miniprogram…

Realized effect:

implementation

  1. Create a custom tab-bar component in the project root directory with the file name index, as shown in the figure

​

  1. Set tabBar to custom in app.json, where list must be defined, otherwise an error will be reported

​

  1. Write tabbar code

​

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>

Copy the code

js

Component({
  data: {
    selected: 0.list: [{"iconPath": "/static/tabbar/index.png"."selectedIconPath": "/static/tabbar/index2.png"."pagePath": "/pages/index/index"."text": "Home page"
      },
      {
        "iconPath": "/static/tabbar/activity.png"."selectedIconPath": "/static/tabbar/activity2.png"."pagePath": "/pages/find/find"."text": "Activity"
      },
      {
        "iconPath": "/static/tabbar/mall.png"."selectedIconPath": "/static/tabbar/mall2.png"."pagePath": "/pages/pageConfig/configIndex"."text": "Mall"
      },
      {
        "iconPath": "/static/tabbar/my.png"."selectedIconPath": "/static/tabbar/my2.png"."pagePath": "/pages/my/my"."text": "I"}},methods: {
    handleClick(e) {
      let path = e.currentTarget.dataset.path;
      let index = e.currentTarget.dataset.index;
      wx.switchTab({ url: path })
      this.setData({ selected: index })
    }
  }
});

Copy the code

WXSS special note: the custom tabbar level defaults to 9999 (unofficial, self-measured results), I use less here, will compile to 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; }}}Copy the code

json

{
  "component": true."usingComponents": {}}Copy the code

After completing the above steps, the tarbar component is written and the next step is to use it

Use a custom tabBar

This component does not need to be registered manually; the page defined in the list automatically loads the component. However, you need to manually specify the highlighted options by using the following method:

// It is recommended to call the onShow method with the selected value as the index value
onShow() {
  this.getTabBar().setData({ selected: 0})}Copy the code

Deal with padding

Since you use a custom Tabbar, you need to set the margins on pages that use tabABr to prevent content from being overwritten. You can define a global style in app.wxss and add the class name to the corresponding page.


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

Copy the code

​

The final result

Our appappen uses the Vant-appen library to override the Tabbar by setting the popup component to a higher level

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

The effect is as follows: