小程序API能力集成指南——界面 Tab Bar API 汇总

最新推荐文章于 2026-04-03 09:41:25 发布

原创最新推荐文章于 2026-04-03 09:41:25 发布 · 737 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#小程序 #前端 #javascript #iot #开发语言

ty.showTabBar

显示 tabBar

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
animation	`boolean`	是	是否需要动画效果
complete	`function`	否	接口调用完成的回调函数（成功或失败都会调用）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 显示 tabBar
 */
export function showTabBar(params: {
  /** 是否需要动画效果 */
  animation: boolean;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.hideTabBar

隐藏 tabBar

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
animation	`boolean`	是	是否需要动画效果
complete	`function`	否	接口调用完成的回调函数（成功或失败都会调用）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 隐藏 tabBar
 */
export function hideTabBar(params: {
  /** 是否需要动画效果 */
  animation: boolean;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.setTabBarBadge

为 tabBar 某一项的右上角添加文本

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
index	`number`	是	tabBar 的哪一项，从左边算起
text	`string`	是	显示的文本，超过 4 个字符则显示成 ...
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 为 tabBar 某一项的右上角添加文本
 */
export function setTabBarBadge(params: {
  /** tabBar 的哪一项，从左边算起 */
  index: number;
  /** 显示的文本，超过 4 个字符则显示成 ... */
  text: string;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.setTabBarItem

动态设置 tabBar 某一项的内容

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
index	`number`	是	tabBar 的哪一项，从左边算起
text	`string`	是	tab 上的按钮文字
iconPath	`string`	是	图片路径
selectedIconPath	`string`	是	选中时的图片路径
complete	`function`	否	接口调用完成的回调函数（成功失败都会回调）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 动态设置 tabBar 某一项的内容
 */
export function setTabBarItem(params: {
  /** tabBar 的哪一项，从左边算起 */
  index: number;
  /** tab 上的按钮文字 */
  text: string;
  /** 图片路径 */
  iconPath: string;
  /** 选中时的图片路径 */
  selectedIconPath: string;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.setTabBarStyle

动态设置 tabBar 的整体样式

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
color	`string`	是	tab 上的文字默认颜色
selectedColor	`string`	是	tab 上的文字选中时的颜色
backgroundColor	`string`	是	tab 的背景色
borderStyle	`string`	是	tabBar 上边框的颜色，仅支持 black/white
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 动态设置 tabBar 的整体样式
 */
export function setTabBarStyle(params: {
  /** tab 上的文字默认颜色 */
  color: string;
  /** tab 上的文字选中时的颜色 */
  selectedColor: string;
  /** tab 的背景色 */
  backgroundColor: string;
  /** tabBar上边框的颜色， 仅支持 black/white */
  borderStyle: string;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.showTabBarRedDot

显示 tabBar 某一项的右上角的红点

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
index	`number`	是	tabBar 的哪一项，从左边算起
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 显示 tabBar 某一项的右上角的红点
 */
export function showTabBarRedDot(params: {
  /** tabBar 的哪一项，从左边算起 */
  index: number;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.hideTabBarRedDot

隐藏 tabBar 某一项的右上角的红点

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
index	`number`	是	tabBar 的哪一项，从左边算起
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 隐藏 tabBar 某一项的右上角的红点
 */
export function hideTabBarRedDot(params: {
  /** tabBar 的哪一项，从左边算起 */
  index: number;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

ty.removeTabBarBadge

移除 tabBar 某一项右上角的文本

需引入MiniKit，且在>=2.0.0版本才可使用

参数

Object object

属性	类型	必填	说明
index	`number`	是	tabBar 的哪一项，从左边算起
text	`string`	是	显示的文本，超过 4 个字符则显示成 ...
complete	`function`	否	接口调用结束的回调函数（调用成功、失败都会执行）
success	`function`	否	接口调用成功的回调函数
fail	`function`	否	接口调用失败的回调函数

函数定义示例

/**
 * 移除 tabBar 某一项右上角的文本
 */
export function removeTabBarBadge(params: {
  /** tabBar 的哪一项，从左边算起 */
  index: number;
  /** 显示的文本，超过 4 个字符则显示成 ... */
  text: string;
  complete?: () => void;
  success?: (params: null) => void;
  fail?: (params: {
    errorMsg: string;
    errorCode: string | number;
    innerError: {
      errorCode: string | number;
      errorMsg: string;
    };
  }) => void;
}): void;

👉 立即开发。