dlt.loadTabBar

简介

首次动态初始化 TabBar 页面。动态加载的配置需要先在 app.json 中进行预注册，加载的配置 tabBar 数量 <= app.json 预注册 tabBar 数量。

使用限制

基础库从 4.0.0 或更高版本支持。

初始化时机

小程序在 appConfig 中增加配置字段 handleTabBarLoad 选项，由开发者自行来选择首次加载 TabBar 数量及样式。 handleTabBarLoad 有以下取值

• static：默认值。在 appConfig.json 中配置 tabBar 的信息，在页面首次渲染完成即加载完成。
• manual：由开发者通过调用 dlt.loadTabBar() 动态触发渲染 TabBar。 例如：在 app.json 中

  {
    "handleTabBarLoad": "manual"
  }
  在 app.json 中预注册的 tabBar 页面调用 dlt.loadTabBar() 能力可直接动态加载 TabBar。首页（预注册页面中的任一页面）已完成渲染且不在预注册的 tabBar 页面调用 dlt.loadTabBar() 能力，再次返回至首页，则无法动态加载 TabBar。

参数

Object object

属性	类型	默认值	必填	说明
tabBarConfig	string		是	TabBar 的配置项，可序列化的 Json 字符串。tabBarConfig 配置内容参见 app.json 配置项中的 tabBar 配置。 备注：list 配置中的地址必须在 app.json 中预注册
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
success	string	true-成功

object.fail 回调函数

参数

Object res

属性	类型	说明
success	string	false-失败
errMsg	string	errMsg 枚举值： 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

示例代码

// 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) {},
    });
  },
});