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

IoT砖家涂拉拉

于 2024-02-23 00:15:00 发布

阅读量576

点赞数 20

文章标签：小程序前端 javascript iot 开发语言 App API

本文链接：https://blog.csdn.net/Ms_Smart/article/details/136169472

版权

本文介绍了如何使用MiniKit库在不同版本中操作tabBar，包括显示、隐藏、添加/移除badge、更改内容样式以及控制红点显示。提供详细的函数定义和回调机制示例。

摘要由CSDN通过智能技术生成

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;

👉 立即开发。