dlt.loadTabBar

Introduction

Dynamically initialize TabBar pages for the first time. The dynamically loaded configuration needs to be pre-registered in app.json, and the number of tab bars loaded dynamically must be less than or equal to the number of pre-registered tab bars in app.json.

Usage Limitations

Supported in the base library version 4.0.0 or higher.

Initialization Timing

Developers can choose when to initially load the TabBar by adding a configuration field called handleTabBarLoad to appConfig.json. This option allows developers to specify the number of TabBar items and their styles. handleTabBarLoad can have the following values:

• static: Default value. Configure the tabBar information in appConfig.json, and it will be loaded as soon as the page rendering is completed.
• manual: Developers can use dlt.loadTabBar() to dynamically trigger the rendering of the TabBar. For example, in app.json:

  {
    "handleTabBarLoad": "manual"
  }
  In the app.json file, tabBar pages that are pre-registered can use the dlt.loadTabBar() capability to dynamically load the TabBar. If dlt.loadTabBar() is called on a page that has already completed rendering and is not one of the pre-registered tabBar pages, it will not be able to dynamically load the TabBar when returning to the home page.

Parameters

Object object

Property	Type	Default	Required	Description
tabBarConfig	string		Yes	The configuration of the TabBar, serialized as a JSON string. The contents of the tabBarConfig are based on the tabBar configuration in app.json. Note: The addresses in the list configuration must be pre-registered in app.json.
success	function		No	The callback function for a successful API call.
fail	function		No	The callback function for a failed API call.
complete	function		No	The callback function that is called when the API call ends (whether it succeeds or fails).

object.success Callback Function

Parameters

Object res

Property	Type	Description
success	string	true - Success

object.fail Callback Function

Parameters

Object res

Property	Type	Description
success	string	false - Failure
errMsg	string	errMsg Enumeration: 1. Parameter error: T10001 2. load tab bar fail, app.json is not config handleTabBarLoad as manual: T10004 3. load tab bar fail, please check the config: T10005 4. load tab bar fail, The number of dynamic configurations is not between 2 and 5: T10006

Sample Code

// pages/index/index.js
Page({
  loadTabBar() {
    const tabBarConfig = {
      color: '#333333',
      selectedColor: '#ff2b4d',
      backgroundColor: '#ffffff',
      borderStyle: 'white',
      list: [
        {
          pagePath: 'pages/index/index',
          text: 'index',
          iconPath: 'images/home_normal.png',
          selectedIconPath: 'images/home_selected.png',
        },
        {
          pagePath: 'pages/home/index',
          text: 'home',
          iconPath: 'images/user_normal.png',
          selectedIconPath: 'images/user_selected.png',
        },
      ],
      position: 'bottom',
      custom: false,
    };

    dlt.loadTabBar({
      tabBarConfig: JSON.stringify(tabBarConfig),
      success: function (res) {},
      fail: function (res) {},
      complete: function (res) {},
    });
  },
});

In the provided sample code, dlt.loadTabBar is used to dynamically initialize the TabBar. The tabBarConfig object specifies the configuration of the TabBar, including its appearance and behavior. When the operation is successful, the success callback function is called, and it logs "success" to the console.