原生小程序开发 API｜界面 Tab Bar API 汇总（二）

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 756 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #SDK #API #App #小程序

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;

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

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;

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。