Custom Tabbar

Custom tabBar allows developers to set the tabBar style more flexibly to meet more personalized scenarios.

In custom tabBar mode

• In order to ensure compatibility with lower versions and distinguish which pages are tab pages, the relevant configuration items of tabBar need to be fully declared, but these fields will not affect the rendering of custom tabBar.

• At this time, the developer needs to provide a custom component to render the tabBar. All tabBar styles are rendered by the custom component. It is recommended to use the fixed at the bottom cover-view + cover-imageComponent rendering style to ensure that the tabBar level is relatively high.

• Interfaces related to tabBar style, such as wx.setTabBarItem , will be invalid.

• The custom tabBar component instance under each tab page is different. You can get the custom tabBar component instance of the current page through the getTabBar interface under the custom component

TIP

To implement the tab selection state, you need to get the component instance through the getTabBar interface under the current page and call setData to update the selected state. Please refer to the code example at the bottom.

Usage process

Configuration information

• Specify the custom field in the tabBar item in app.json, and complete the rest of the tabBar related configurations
• The usingComponents item must be declared in the json of all tab pages, and it can also be enabled globally in app.json.

Code example:

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

Add tabBar code file

Add entry file in the root directory of code:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

Write tabBar code

You can write it in the form of custom component. The custom component completely takes over the rendering of tabBar. In addition, the custom component adds getTabBar interface to obtain the custom tabBar component instance under the current page.

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})