底部菜单

不是 body 里的组件。写在入口 deekeScript.json 的 bottomMenus，颜色写在 window.tabBar。页面里用 this.setTabBar 创建/恢复整栏，用 this.setTabBarItem / this.setTabBarStyle 改运行时状态。

右侧从首页进。点按钮改某一项的文字、角标、隐藏，或只改整栏文字色、图标色、背景。再切 Tab 看效果。完整工程在 Demo「能力 → 底部菜单」。

先看效果

Page({
  onBadge() {
    this.setTabBarItem({ page: 'components', badge: 9 });
  },
  onClearBadge() {
    this.setTabBarItem({ page: 'components', badge: 0 });
  },
  onHideComponents() {
    this.setTabBarItem({ page: 'components', hidden: true });
  },
  onShowComponents() {
    this.setTabBarItem({ page: 'components', hidden: false });
  },
  onRename() {
    this.setTabBarItem({ page: 'components', title: '控件' });
  },
  onRestoreName() {
    this.setTabBarItem({ page: 'components', title: '组件' });
  },
  onOrangeText() {
    this.setTabBarStyle({ color: '#C2410C', selectedColor: '#EA580C' });
  },
  onOrangeIcon() {
    this.setTabBarStyle({ iconColor: '#C2410C', selectedIconColor: '#EA580C' });
  },
  onDarkBar() {
    this.setTabBarStyle({ background: '#1A1A1A', borderColor: '#333333' });
  },
  onLightBar() {
    this.setTabBarStyle({ background: '#FFFFFF', borderColor: '#EEEEEE' });
  }
});

底部菜单

9:41100%

首页

文字色 color / selectedColor，图标色 iconColor / selectedIconColor，只传要改的字段。点下面按钮改完再切 Tab 看。

配置

{
  "window": {
    "tabBar": {
      "color": "#6F7978",
      "selectedColor": "#006A65",
      "background": "#FFFFFF",
      "borderColor": "#EEEEEE"
    }
  },
  "bottomMenus": [
    { "title": "首页", "icon": "img/home.svg", "page": "pages/home" },
    { "title": "组件", "icon": "img/apps.svg", "page": "pages/components", "badge": 3 },
    { "title": "能力", "icon": "img/setting.svg", "page": "pages/ability" }
  ]
}

不配或空数组则没有底栏。字段见 配置。页内选项卡是另一个组件，见 组件 · Tabs。

页面方法

二级页默认没有底栏。this.setTabBar({ items }) 在当前页创建一栏；this.setTabBar() 写回入口 bottomMenus。用 page（文件夹或 id）或 index（从 0 起）定位某一项。

setTabBar

参数	说明
items	菜单数组，字段与入口 bottomMenus 相同。不传则恢复默认
其余	与 setTabBarStyle 相同，创建时一并生效

this.setTabBar({
  items: [
    { title: '首页', icon: 'img/home.svg', page: 'pages/home' },
    { title: '组件', icon: 'img/apps.svg', page: 'pages/components', badge: 3 },
    { title: '能力', icon: 'img/setting.svg', page: 'pages/ability' }
  ]
});
this.setTabBar();

setTabBarItem

参数	说明
page / index	改哪一项
badge	角标。0、'' 表示去掉
hidden	true 隐藏这一项，false 再显示
title	改文字
icon / selectedIcon	改图标路径

this.setTabBarItem({ page: 'pages/components', badge: 9 });
this.setTabBarItem({ page: 'pages/components', title: '控件' });
this.setTabBarItem({ page: 'pages/components', hidden: true });

颜色是整栏一起改的，不能只改某一项的图标色。某一项的文字用 title。setTabBarStyle 只覆盖传入的字段：改文字色不会动图标色，改背景也不会把颜色改回去。

setTabBarStyle

参数	说明
color	未选中项的文字颜色。未单独写图标色时，图标也用这个
selectedColor	选中项的文字颜色。未单独写图标色时，图标也用这个
iconColor	未选中项的图标颜色。不写则跟 color
selectedIconColor	选中项的图标颜色。不写则跟 selectedColor
background	底栏背景
borderColor	顶部分割线
fontSize	文字大小（sp）
hidden	true 隐藏整栏

this.setTabBarStyle({
  color: '#C2410C',
  selectedColor: '#EA580C'
});
this.setTabBarStyle({
  iconColor: '#C2410C',
  selectedIconColor: '#EA580C'
});
this.setTabBarStyle({
  background: '#1A1A1A',
  borderColor: '#333333'
});

离开时恢复

改底栏是全局的。Demo 进入独立页时 setTabBar({ items }) 创建底栏，离开时 this.setTabBar() 写回入口配置。

Page({
  onShow() {
    this.setTabBar({
      items: [
        { title: '首页', icon: 'img/home.svg', page: 'pages/home' },
        { title: '组件', icon: 'img/apps.svg', page: 'pages/components', badge: 3 },
        { title: '能力', icon: 'img/setting.svg', page: 'pages/ability' }
      ]
    });
  },
  onHide() {
    this.setTabBar();
  },
  onUnload() {
    this.setTabBar();
  }
});

切 Tab 用 this.switchTab，见 页面跳转。