tt.showTabBar
基础库
1.44.0开始支持，低版本需做 兼容处理。
显示 tabBar，tabBar 显示时仅页面可视范围缩小，页面 screenheight 无变化。相关 API：tt.hideTabBar。
语法
tt.showTabBar([options]);参数说明
options 为 object 类型，属性如下：
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|---|
| animation | boolean | false | 否 | 是否需要动画效果 | 1.44.0 |
| success | function | 否 | 接口调用成功的回调函数 | 1.44.0 | |
| fail | function | 否 | 接口调用失败的回调函数 | 1.44.0 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行），回调参数同成功或失败回调 | 1.44.0 |
回调成功
Object 类型，属性如下：
| 属性 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "showTabBar:ok" | 1.44.0 |
回调失败
Object 类型，属性如下：
| 属性 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| errMsg | string | "showTabBar:fail " + 详细错误信息 | 1.44.0 |
效果示例
扫码体验
请使用字节宿主APP扫码
代码示例
【代码示例 1】：无参数示例
预期表现：tabBar 正常显示 / 隐藏，但无动画。
<!-- index.ttml -->
<button bindtap="showTabBar">显示 TabBar(无参）</button>
<button bindtap="hideTabBar">隐藏 TabBar(无参）</button>// index.js
Page({
showTabBar() {
tt.showTabBar();
},
hideTabBar() {
tt.hideTabBar();
},
});【代码示例 2】：有参数示例
预期表现：tabBar 正常显示 / 隐藏，且有动画，并给出成功或失败提示。
<!-- index.ttml -->
<button bindtap="showTabBar">显示 TabBar</button>
<button bindtap="hideTabBar">隐藏 TabBar</button>// index.js
Page({
showTabBar() {
tt.showTabBar({
animation: true,
success(res) {
tt.showToast({ title: "tabBar 显示成功" });
},
fail(err) {
tt.showModal({
title: "tabBar 显示失败",
content: err.errMsg,
showCancel: false,
});
},
complete(res) {
console.log("showTabBar 执行完成");
},
});
},
hideTabBar() {
tt.hideTabBar({
animation: true,
success(res) {
tt.showToast({ title: "tabBar 隐藏成功" });
},
fail(err) {
tt.showModal({
title: "tabBar 隐藏失败",
content: err.errMsg,
showCancel: false,
});
},
complete(res) {
console.log("hideTabBar 执行完成");
},
});
},
});Bug & Tip
暂无
点击纠错
评价此篇文档