If you’ve ever done a small program, you know how painful it is to write tabbar

If you haven’t done it, it’s just a lump of X. But then again, he’s not entirely to blame…

I. Original plan

Applets are native to tabbar functionality and have some customization capabilities

Specifically, there are two methods:

1. Configure the configuration file

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

Do the following in the global configuration file:

The configuration files are app.json files in the SRC directory in the native applets framework and app.config.ts files in the SRC directory in the taro framework. Note that the configuration icon image path must be a local path, not a CDN

Defect:

1) The image can only be a local path, that is, the image must be in the project, which is not a good solution for the package volume sensitive small program

2) The degree of customization is very low, including the size of each icon and the color of the text. If there is a need to have a raised icon in the tabbar, there is no solution

2. Use the wx. settabBarItem method

The principle is the same as using a configuration file, but the drawbacks are the same

Official use document: developers.weixin.qq.com/miniprogram…

Summary: The use of native methods have many advantages, such as fast response, fast loading, convenient configuration, so in fact, many small programs in large factories have adopted the native way. But this small program also has a scenario, is in the first page, need to determine whether to display tabbar through the interface, that is, before the interface returned, is not able to display tabbar, must use wx.hidetabbar method to hidetabbar, but this will bring a new problem, The Android screen flashes every time a page refreshes. This is an official API issue that has not been officially fixed yet… Say a digression, don’t expect official best developers.weixin.qq.com/community/d…

2. Customize tabbar

The customization here is not a complete customization, but under the official program, there is a feeling of dancing with shackles. Methods: developers.weixin.qq.com/miniprogram…

Taro framework under the method is slightly different, this small program using the taro framework, so details

1. Configuration files

Firstly, the configuration about icon copy in the configuration file should be deleted, which has no effect any more. The deleted configuration file is as follows

SRC directory app.json.ts file

The list configuration item still needs to be retained to tell the applet which pages need to use tabbar

2. Tabbar components

The most core step, tabbar component writing. Create a custom tab-bar directory in the SRC directory, create index.tsx and index.module. SCSS files under it, and write the style and logic

HTML part:

The CSS part:

Js:

Defect:

You may have noticed that the way to change tabbar’s current selection is strange. Why not use setIndex of UsEstate instead of publishing and subscribing to change the state…

This is because there is another dark hole in the applet where tabbar is a new instance whenever you enter the page using the wx.switchtab method

You see that? It’s official. That is, each time a new Tabbar page is created, the current tabbar index is reset. Like this

Think it’s perfect? Too young, and a hole. Because it is a new tabbar instance each time, the tabbar is redrawn the first time the page is entered. This issue is currently no solution developers.weixin.qq.com/community/d… . But compared to other problems, this flaw is acceptable

3. Complete customization

The ideal solution, completely abandon the official system… Make your own tabbar. Feasible? It’s true that what works is hard

Writing styles is not hard. The difficulty is how to cache page nodes. For example, tabbar corresponds to two pages A and B. After page A is loaded, click Tabbar to switch to page B. Click tabbar again to cut back to page A. If nothing special is done, page A will be reloaded. This is obviously not user-friendly, and we want to show the cached A page. So how to cache page A becomes the key. React has a third party component such as react-keep-alive. Vue has a natural keep-alive implementation. It’s not a problem. But these libraries and methods are not available, need to implement their own, some trouble. The virtual DOM needs to be cached. We can do it if we have time