开发
API

tt.showTabBar

基础库 1.44.0 开始支持,低版本需做 兼容处理

显示 tabBar,tabBar 显示时仅页面可视范围缩小,页面 screenheight 无变化。相关 API:tt.hideTabBar

语法

tt.showTabBar([options]);

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
animationbooleanfalse是否需要动画效果1.44.0
successfunction接口调用成功的回调函数1.44.0
failfunction接口调用失败的回调函数1.44.0
completefunction接口调用结束的回调函数(调用成功、失败都会执行),回调参数同成功或失败回调1.44.0

回调成功

Object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"showTabBar:ok"1.44.0

回调失败

Object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"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

暂无

点击纠错
评价此篇文档