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: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

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>

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": "active ", {"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"}}], the methods: {handleClick (e) {let path = e.c. with our fabrication: urrentTarget. Dataset. The 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, 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; }}}

json

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

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:

OnShow () {this.gettabbar ().setdata ({selected: 0})}

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));
}

​

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>

The effect is as follows: