Accept the challenge

Designers are finally fed up with tabbar, height, fonts… .

He found Xiao Li: “Xiao Li, I am very worried, it affects the harmony and beauty of our small program. It’s out of place at the bottom, style, font, height… . It cuts us off from interacting with our users, and we can hide our shells no matter how high.” .

Painting wind a turn, the designer crooked mouth a smile: “can it be done?” .

“I can try it, but you know, it costs more!” whispered Li, reclining in one of the company’s ergonomic chairs, MI 10 Pro in hand. “, the designer is satisfied with the retreat, he knows that there is no little Li promised not to do things.

Xiao Li is plain on the surface, but in his heart, he is a horse with ten thousand grass mud horses. As a front trainee of two and a half years of practice, he reads small program documents carefully. Isn’t it just for today? Wechat Tabbar rather have seed?

Custom tabbar

According to wechat’s documentation for custom tabBar, three simple steps with a little detail can be done

  1. Configuration information

    • The tabBar TAB in app.json specifies the Custom field, and the rest of the tabbar-related configuration is complete.

    • UsingComponents must be declared in the JSON TAB page, and can be enabled globally in app.json.

      Example:

      {
  "tabBar": {
    "custom": true."color": "# 000000"."selectedColor": "# 000000"."backgroundColor": "# 000000"."list": [{
      "pagePath": "page/component/index"."text": "Component"
    }, {
      "pagePath": "page/API/index"."text": "Interface"}},"usingComponents": {}}Copy the code

  2. Add the tabBar code file

    Add the entry file to the code root directory:

    ```bash
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
```
Copy the code

  3. Write tabBar code

    Write it as a custom component that takes over tabBar rendering completely. In addition, custom components add the getTabBar interface to get custom tabBar component instances under the current page.

  4. Convert to Taro3 code

It looks like this!

It off

Soon the project was on the line, the matter came to an end, Xiao Li once again maintained the beauty and harmony of the small program, once again adhere to the principle of “this can be done”. It wasn’t until iOS 14 found out that custom tababr would go away, so would love go away? Everything changed.

Xiao Li began to panic, looking for a speech, tour development community, see the relevant problems. Finally, the official reply:

Custom tabBar causes tabBar to disappear when switching tabs

Li quickly followed the official reply: after the TAB page is displayed, a setData call triggers the page to be rerendered and the tabBar to be displayed again. SetState, forever!

A different approach

Xiao Li thinks this thing is very hack, call setData for no reason. He seems to have fallen into the pit of anchoring effect. He customized tabbar according to wechat custom Tabbar document, and solved tabbar disappearance according to wechat said setState.

According to the wechat document:

Components in the custom-tab-bar directory will be placed on the TAB page.

Wait, put it on TAB?

Why can’t I play it myself?

Thought had broken the anchor, now Xiao Li could swim freely in the sea. Custom tabbar as a common component to actively mount to several TAB pages, empty components into the directory of custom-tab-bar, no setState, no hack!