开发
API

tt.setTabBarStyle

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

动态设置 tabBar 的整体样式。底部标签栏位于小程序底部,方便用户在不同功能模块之间进行快速切换。为保证可用性,底部导航栏承载 2-5 个功能,如果超出 5 个功能项,请酌情移入页面或菜单内。

语法

tt.setTabBarStyle([options])

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
colorstring文字默认颜色,6 位 HexColor 例如"#ff3377"1.44.0
selectedColorstring文字选中时的颜色,6 位 HexColor 例如"#ff3377"1.44.0
backgroundColorstring背景颜色1.44.0
borderStyle"black" | "white"上边框的颜色, 仅支持 "black" | "white"1.44.0
successfunction接口调用成功的回调函数1.44.0
failfunction接口调用失败的回调函数1.44.0
completefunction接口调用结束的回调函数(调用成功、失败都会执行),回调参数同成功或失败回调1.44.0

回调成功

Object 类型,属性如下:

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

回调失败

Object 类型,属性如下:

属性类型说明最低支持版本
errMsgstring"setTabBarStyle:fail " + 详细错误信息1.44.0

效果示例

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

【代码示例 1】:设置基础属性

<button bindtap="setTabBarStyle">设置 tabBar 样式</button>
Page({
  setTabBarStyle() {
    tt.setTabBarStyle({
      color: "#666666",
      selectedColor: "#ff3377",
      backgroundColor: "#fefefe",
      borderStyle: "white",
      success(res) {
        tt.showToast({ title: "设置成功" });
      },
      fail(err) {
        tt.showModal({
          title: "设置失败",
          content: err.errMsg,
          showCancel: false,
        });
      },
      complete(res) {
        console.log("完成设置");
      },
    });
  },
});

【代码示例 2】:设置默认样式

tabBar 的默认样式可在 app.json 中设置。

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#ed4040",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "position": "bottom",
    "list": [
      {
        "pagePath": "page/index/index",
        "iconPath": "image/icon_index.png",
        "selectedIconPath": "image/icon_index_select.png",
        "text": "首页"
      },
      {
        "pagePath": "page/detail/index",
        "iconPath": "image/icon_detail.png",
        "selectedIconPath": "image/icon_detail_select.png",
        "text": "详情"
      }
    ]
  }
}

Bug & Tip

  • Tip:为保证可用性,底部导航栏承载 2-5 个功能,如果超出 5 个功能项,请酌情移入页面或菜单内。
  • Tip:调用此 API 时若不传某项参数,则该参数对应的样式保持不变。
  • Tip:抖音 iOS 暂不支持此能力。
点击纠错
评价此篇文档