智能小程序 Ray 开发界面 API —— Tab Bar API 合集

原创于 2024-05-20 00:15:00 发布 · 754 阅读

29 ·

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

GEO检测

标签

#前端 #javascript #开发语言 #小程序 #物联网

showTabBar

显示 tabBar

引入

import { showTabBar } from '@ray-js/ray';

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

参数

Object object

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

hideTabBar

隐藏 tabBar

引入

import { hideTabBar } from '@ray-js/ray';

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

参数

Object object

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

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

setTabBarBadge

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

引入

import { setTabBarBadge } from '@ray-js/ray';

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

参数

Object object

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

setTabBarItem

动态设置 tabBar 某一项的内容

引入

import { setTabBarItem } from '@ray-js/ray';

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

参数

Object object

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

setTabBarStyle

动态设置 tabBar 的整体样式

引入

import { setTabBarStyle } from '@ray-js/ray';

需引入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`	否	接口调用失败的回调函数

showTabBarRedDot

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

引入

import { showTabBarRedDot } from '@ray-js/ray';

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

参数

Object object

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

hideTabBarRedDot

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

引入

import { hideTabBarRedDot } from '@ray-js/ray';

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

参数

Object object

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

removeTabBarBadge

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

引入

import { removeTabBarBadge } from '@ray-js/ray';

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

参数

Object object

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