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

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

ty.showTabBar

显示 tabBar

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

参数

Object object

属性类型默认值必填说明
animationboolean是否需要动画效果
completefunction接口调用完成的回调函数(成功或失败都会调用)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 显示 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

属性类型默认值必填说明
animationboolean是否需要动画效果
completefunction接口调用完成的回调函数(成功或失败都会调用)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 隐藏 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

属性类型默认值必填说明
indexnumbertabBar 的哪一项,从左边算起
textstring显示的文本,超过 4 个字符则显示成 ...
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 为 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

属性类型默认值必填说明
indexnumbertabBar 的哪一项,从左边算起
textstringtab 上的按钮文字
iconPathstring图片路径
selectedIconPathstring选中时的图片路径
completefunction接口调用完成的回调函数(成功失败都会回调)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 动态设置 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

属性类型默认值必填说明
colorstringtab 上的文字默认颜色
selectedColorstringtab 上的文字选中时的颜色
backgroundColorstringtab 的背景色
borderStylestringtabBar 上边框的颜色, 仅支持 black/white
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 动态设置 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

属性类型默认值必填说明
indexnumbertabBar 的哪一项,从左边算起
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 显示 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

属性类型默认值必填说明
indexnumbertabBar 的哪一项,从左边算起
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 隐藏 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

属性类型默认值必填说明
indexnumbertabBar 的哪一项,从左边算起
textstring显示的文本,超过 4 个字符则显示成 ...
completefunction接口调用结束的回调函数(调用成功、失败都会执行)
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数

函数定义示例

/**
 * 移除 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;

 👉 立即开发

  • 20
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IoT砖家涂拉拉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值