# Custom tabBar

Start from base library version 2.5.0. Please remaining backward compatible.

Custom tabBar allows developers more flexibility to set tabBar styles to meet more personalized scenarios.

In custom tabBar mode

• In order to ensure low version compatibility and distinguish which pages are tab pages, the relevant configuration items of the tabBar need to be fully declared, but these fields will not affect the rendering of the custom tabBar.
• The developer needs to provide a custom component to render tabBar, and all tabBar styles are rendered by this custom component.Recommended cover-view + cover-image Component rendering styles to ensure that tabBar levels are relatively high.
• Interfaces associated with tabBar styles, such as wx.setTabBarItem , will be invalidated.
• The custom tabBar component instance under each tab page is a different and you can obtain the custom tabBar components instance for the current page through thegetTabBarinterface under the custom component.

Note: To implement a tab check state, get the component instance via thegetTabBarinterface under the current page, and call setData to update the check state.See the code example at the bottom.

# Use Procedure

# 1. Configuration information

• InapagejsonThetabBaritem specifies thecustomfield, while the remainingtabbarconfigurations are supplemented.
• usingComponentsare declared in the json of all tabs, and can also be opened globally inapagejson.

Examples:

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

# 2. Add tabBar code file

Add an entry file to the code root directory:

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

# 3. Writing tabBar code

You can write it as a custom component that takes over the rendering of tabBar entirely.In addition, the custom component adds thegetTabBarinterface to get an instance of the custom tabBar component under the current page.

# sample code

Preview with Developer Tool

# Skyline mode

When using skyline rendering mode, you need to adapt as follows:

# 1. Tabbar component style compatible

• The tabBar root component needs to addpointer-events: auto
• TabBar root component positioning needs to beposition: absolute

<view class="tab-bar">
  <!-- tabbar item-->
</view>

.tab-bar {
  pointer-events: auto;
  position: absolute;
}

# 2. GetTabBar Callback Function

In skyline mode, thegetTabBarinterface on the page / component gets an instance of tabBar as an asynchronous callback

Page({
  getInstance() {
    if (typeof this.getTabBar === 'function' ) {
      this.getTabBar((tabBar) => {
        tabBar.setData({
          selected: 0
        })
      })
    }
  }
})

# Skyline Sample Code

Preview with Developer Tool