# custom tabBar

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

custom tabBar This allows developers to be more flexible. tabBar Styles to suit more personalized scenes.

In Custom tabBar Under mode

• In order to guarantee low version compatibility as well as to distinguish which pages are tab Page, tabBar Need to be fully declared, but these fields do not apply to custom tabBar Of the rendering.
• At this point the developer is required to provide a custom component to render Tabbar, all tabBar Are rendered by this custom component. Recommended use fixed At the bottom of the cover-view + cover-image Component rendering styles to ensure that the tabBar The level is relatively high.
• and tabBar Style-related interfaces, such as wx.setTabBarItem Will fail.
• Each tab Custom under the page tabBar Component instances are different, available through the getTabBar Interface, gets the custom of the current page tabBar Component instance.

Note: If you need to implement tab Selected state, to be under the current page, by getTabBar Interface to get the component instance and call the setData Update the selected state. See the code example at the bottom.

# Use Process

# 1. Configuration information

• in app.json to hit the target tabBar Item specified custom Fields, while the rest tabBar The relevant configuration is also complete.
• all tab Page json Required statement usingComponents Item, can also be found in the app.json Global open.

Example:

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

# 2. Add to 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. write tabBar code

Written in the form of a custom component that completely takes over the tabBar Of the rendering. In addition, custom components added getTabBar Interface to get the custom under the current page tabBar Component instance.

# sample code

{% Minicode ('ouJiKgm67cHk') %}

# skyline Pattern

use skyline When rendering the mode, the following adaptations are required:

# 1. tabBar Component Style Compatibility

• tabBar The root component needs to be added pointer-events: auto
• tabBar The root component location needs to be position: absolute

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

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

# 2. getTabBar callback

skyline Mode, Page/On the component getTabBar Interface to an asynchronous callback tabBar Example

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

# skyline sample code

{% Minicode ('rhhPXDm47gKe') %}