Use this API to customize the tab bar appearance including text colors, background color, and border style.
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
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'
});
}
});
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
