WeChat Mini Program Custom Tabbar

Taro supports using React, Vue, or the native syntax of the applet to write the custom TabBar component of the applet.

sample project

WeChat Mini Program Custom TabBar (React)

WeChat applet custom TabBar (Vue3)

how to use

The configuration method is the same as that of the WeChat Mini Program, please read the "WeChat Mini Program Custom TabBar Documentation" carefully before development .

configuration information

Fill in the relevant configuration of the tabBar item in app.config as usual (for backward compatibility), and set the custom field of the tabBar item to true.

All the configs used as TabBar pages need to declare the usingComponents item, and it can also be enabled globally in app.config settings.

Example:

app.config.js

export default {
  tabBar: {
    custom: true,
    color: '#000000',
    selectedColor: '#000000',
    backgroundColor: '#000000',
    list: [
      {
        pagePath: 'page/component/index',
        text: '组件',
      },
      {
        pagePath: 'page/API/index',
        text: '接口',
      },
    ],
  },
}

page/component/index.config.js

export default {  navigationBarTitleText: '组件页',  usingComponents: {},}

page/API/index.config.js

export default {  navigationBarTitleText: '接口页',  usingComponents: {},}

add custom-tab-bar

Add the custom-tab-bar directory under the src directory , write components in it, and support React, Vue and native writing.

React：

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.jsx
└── package.json

Vue：

├── config
├── src
|   └── custom-tab-bar
|       ├── index.json.js
|       └── index.vue
└── package.json

Native writing:

├── config
├── src
|   └── custom-tab-bar
|       ├── index.js
|       ├── index.json
|       ├── index.wxss
|       └── index.wxml
└── package.json

Image resource reference

When using React/Vue to develop a custom TabBar, you can not use import or require to reference image resources (Taro will automatically handle it according to the TabBar configuration).

If you use import, require or use background-image, you need to pay attention to whether the image is processed as base64 by url-loader, and the base64 image cannot be displayed in the TabBar.

state management

The biggest difference between the default TabBar and the custom TabBar is that the default TabBar shares a component instance in all TabBar pages, while the custom TabBar will create a new component instance when each TabBar page is initialized .

That is to say, the state of the custom TabBar component instance in each TabBar page is not shared. Therefore, the state management of TabBar (such as selected state) is particularly important.

For custom TabBar with different writing styles, Taro provides different state management solutions:

1. Native writing

It is recommended to use the getTabBar method to manage the native writing method of the WeChat Mini Program. If your custom component is written using the native writing method, you can refer to the official example provided by the Mini Program .

The only thing to note is that this.getTabBar is called on the native page of the applet, but the Taro page is a React/Vue component, and this does not point to the native page object. Therefore, you need to obtain the native page object before calling:

// 页面 onShow 时Taro.getCurrentInstance().page.getTabBar()

2. React / Vue

React and Vue recommend using state management tools (Redux, Vuex, etc.) to manage the state of the TabBar page. The advantage is that there is no need to invade the code of each TabBar page, and the logic can be collected in the TabBar component.

If developers don't want to use state management tools, Taro provides Taro.getTabBar API to get custom TabBar components (React/Vue components), and then developers can call methods on it to update the state of TabBar components.

// 页面 onShow 时const pageObj = Taro.getCurrentInstance().pageconst tabbar = Taro.getTabBar(pageObj)

Two examples are provided in the sample project , the React version example shows how to use Taro.getTabBar to manage the state, and the Vue3 version example shows how to use the state management tool to manage the state.

Component Configuration Items

The custom TabBar component is constructed using the Component constructor of the applet, and developers may need to configure the Component when dealing with issues such as style isolation. At this time, developers can give these configuration item properties to custom components written in React/Vue, and Taro will place them on the Component construction object. Currently, it supports: options, externalClasses, and behaviors.

example:

React

sample code

// Class Component
class CustomTabBar extends Component {
  static options = {
    addGlobalClass: true,
  }
}

// Functional Component
function CustomTabBar() {}
CustomTabBar.options = {
  addGlobalClass: true,
}

common problem

flickering problem

The TabBar will flicker when the TabBar page is loaded for the first time

Custom TabBar will create a new component instance when each TabBar page is initialized. You can go to the WeChat applet developer community to find related solutions.

Picture flashes when switching tabs

Try to use local pictures or iconfont.

taro - WeChat custom tabbar