Tencent Cloud

Recent Pages

Custom TabBar

Last updated: 2024-11-28 10:34:10

Custom tabBar allows developers to flexibly set tabBar styles and achieve greater personalization.
In custom tabBar Mode:
In order to ensure compatibility with older versions and identify pages that are tab pages, the relevant tabBar configuration items must be completely declared. However, these fields cannot be used to render custom tabBars.
Developers must provide a custom component to render the tabBar, and all tabBar styles must be rendered via the custom component. To ensure a higher tabBar level, we recommend using cover-view and cover-image components which are fixed at the bottom of the page to render styles.
APIs related to tabBar styles, such as wx.setTabBarItem, will be deactivated.
The custom tabBar component instances vary with different tab pages. You can use the getTabBar API under a custom component to get the custom tabBar component instance of the current page.
Note：
To put a tab in the selected status, on the current page, use the getTabBar API to get the component instance and call setData to update the selected status. See the code sample at the bottom for details.
How to use
Configure information
Specify the custom field of the tabBar item in app.json and set the other configurations related to tabBar;
The usingComponents item must be declared in json of all tab pages. You can also enable this option 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 files
Add the entry files in the code root directory:
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 the code using a custom component to render tabBar. In addition, the getTabBar API is added to the custom component to get the custom tabBar component instance of the current page.
Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0
        })
      }
    }
  }
})
﻿

Contact Us

Contact our sales team or business advisors to help your business.

Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

7x24 Phone Support

tencent cloud

Recent Pages

Custom TabBar

How to use

Configure information

Add tabBar code files

Write tabBar code

Was this page helpful?

Was this page helpful?

tencent cloud

Sign Up

Log in

Recent Pages

Custom TabBar

How to use

Configure information

Add tabBar code files

Write tabBar code

Was this page helpful?

Was this page helpful?