How to implement custom tabBar for applet

background

Since the default tabbar of WeChat is an official component and has the highest priority, the mask layer of our own component cannot cover them. To solve this problem, we can use the custom tabBar function provided by WeChat.
​

Official document: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
​

Realize the effect:
​

Method to realize

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

​

2. Set tabBar to custom in app.json, the list here must be defined, otherwise an error will be reported

​

3. 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>

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
Special note: The custom tabbar level defaults to 9999 (unofficial note, the result of my own measurement), and the less I use here will be compiled into 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": {}
}

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

Use custom tabBar

This component does not need to be manually registered, the page defined in the list will automatically load this component. However, you need to manually specify the highlighted options through the following method:
​

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

Processing padding value

Since a custom tabbar is used, it is necessary to set the padding on the page using tababr to prevent the content from being overwritten. You can define a global style in app.wxss, and then add this class name on the corresponding page.
​

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

​

final effect

Our small program uses the vant-weapp component library. For the popup component, set a higher level to cover the 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>
   

The effect is as follows:
​