Custom tabBar

The basic library 2.5.0 is supported, and the lower version needs to be compatible.

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

In custom tabBar mode

In order to ensure the compatibility of lower versions and distinguish which pages are tab pages, the relevant configuration items of the tabBar need to be fully declared, but these fields will not be used for the rendering of the custom tabBar.
At this time, the developer needs to provide a custom component to render the tabBar, and all the styles of the tabBar are rendered by the custom component. It is recommended to use the fixed cover-view + cover-image component rendering style at the bottom to ensure that the tabBar level is relatively high.
Interfaces related to tabBar style, such as wx.setTabBarItem, etc. will be invalid.
The custom tabBar component instance under each tab page is differentgetTabBar , and the custom tabBar component instance of the current page can be obtained through the interface under the custom component .

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。可参考底部的代码示例。

manual

1. Configuration information

The item in specifies the field, and the rest of app.jsonthe related configurations are also complete.tabBarcustomtabBar
Items need to be declared in the json of all tab pages usingComponents, and can also app.jsonbe enabled globally.

Example:

{
  "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 the entry file in the root directory of the code:

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

3. Write the tabBar code

It can be written in the form of a custom component, which completely takes over the rendering of the tabBar. In addition, the custom component has a new getTabBarinterface, which can obtain the custom tabBar component instance under the current page.

sample code

Preview the effect in the developer tools

skyline mode

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

1. The tabBar component style is compatible

The tabBar root component needs to be addedpointer-events: auto
The tabBar root component needs to be positioned asposition: absolute

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

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

2. getTabBar callback function

In skyline mode, the interface on the page/component getTabBarobtains the tabBar instance in the form of asynchronous callback

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

skyline sample code