开发
API

tt.setTabBarItem

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

动态设置 tabBar 某一项的内容。

语法

tt.setTabBarItem(options)

参数说明

options 为 object 类型,属性如下:

属性名类型默认值必填说明最低支持版本
indexnumbertabBar 的哪一项,从左边算起,左起第一个为 01.44.0
textstringTab 上的文字1.44.0
iconPathstring图片路径,仅支持包内路径1.44.0
selectedIconPathstring选中时的图片路径,仅支持包内路径1.44.0
successfunction接口调用成功的回调函数1.44.0
failfunction接口调用失败的回调函数1.44.0
completefunction接口调用结束的回调函数(调用成功、失败都会执行),回调参数同成功或失败回调1.44.0

回调成功

Object 类型,属性如下:

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

回调失败

Object 类型,属性如下:

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

效果示例

扫码体验

请使用字节宿主APP扫码

代码示例

开发者工具中预览

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

<!-- index.html -->
<button type="primary" bindtap="setTabBarItem">设置第一项 tabBar</button>
// index.js
Page({
  setTabBarItem() {
    tt.setTabBarItem({
      index: 0,
      text: "text",
      iconPath: "/path/to/iconPath", // 此处写 icon 在包内的路径
      selectedIconPath: "/path/to/selectedIconPath", // 此处写 selectedIcon 在包内的路径
      success(res) {
        tt.showToast({ title: "设置成功" });
      },
      fail(err) {
        tt.showModal({
          title: "设置失败",
          content: e.errMsg,
          showCancel: false,
        });
      },
      complete(res) {
        console.log("完成设置");
      },
    });
  },
});

【代码示例 2】:设置 tabBar 默认值

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

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

暂无

点击纠错
评价此篇文档