my.setTabBarStyle

Parameters

Property	Type	Required	Description
color	HexColor	Yes	Default text color on tabs
selectedColor	HexColor	Yes	Selected tab text color
backgroundColor	HexColor	Yes	Tab bar background color
borderStyle	String	Yes	Border color: `black` or `white` only
success	Function	No	Callback on success
fail	Function	No	Callback on failure
complete	Function	No	Callback that always executes

Code Example

Basic Usage

my.setTabBarStyle({
  color: '#7A7E83',
  selectedColor: '#3CC51F',
  backgroundColor: '#FFFFFF',
  borderStyle: 'black'
});

Dark Theme

my.setTabBarStyle({
  color: '#8E8E93',
  selectedColor: '#FFFFFF',
  backgroundColor: '#1C1C1E',
  borderStyle: 'black'
});

Brand Colors

my.setTabBarStyle({
  color: '#666666',
  selectedColor: '#108ee9',
  backgroundColor: '#FFFFFF',
  borderStyle: 'white'
});

Use Cases

Theme Switching

Page({
  data: {
    isDarkMode: false
  },

  toggleTheme() {
    const isDark = !this.data.isDarkMode;
    this.setData({ isDarkMode: isDark });

    my.setTabBarStyle({
      color: isDark ? '#8E8E93' : '#7A7E83',
      selectedColor: isDark ? '#FFFFFF' : '#108ee9',
      backgroundColor: isDark ? '#1C1C1E' : '#FFFFFF',
      borderStyle: isDark ? 'black' : 'white'
    });
  }
});

Seasonal Themes

function applyHolidayTheme() {
  my.setTabBarStyle({
    color: '#666666',
    selectedColor: '#C41E3A',
    backgroundColor: '#FFF8F0',
    borderStyle: 'white'
  });
}

IDE simulation is not supported for this API. Please test in the production environment.

my.hideTabBar

Hide the tab bar

my.switchTab

Navigate to a tab page

JSAPI Reference

Basic

In-App Events

UI

Media

Storage

File

Location

Map

Network

Device

Sharing

Collection

Update

Web View

Alipay Connect

Open Capabilities

Other

Parameters

Code Example

Basic Usage

Dark Theme

Brand Colors

Use Cases

my.hideTabBar

my.switchTab

​Parameters

​Code Example

​Basic Usage

​Dark Theme

​Brand Colors

​Use Cases

​Related APIs

my.hideTabBar

my.switchTab

Parameters

Code Example

Basic Usage

Dark Theme

Brand Colors

Use Cases

Related APIs