Parameters
Code Example
Basic Usage
Dark Theme
Brand Colors
Use Cases
Theme Switching
Theme Switching
Seasonal Themes
Seasonal Themes
Related APIs
my.hideTabBar
Hide the tab bar
my.switchTab
Navigate to a tab page
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Set the overall style of the tab bar including colors and border.
| 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 |
my.setTabBarStyle({
color: '#7A7E83',
selectedColor: '#3CC51F',
backgroundColor: '#FFFFFF',
borderStyle: 'black'
});
my.setTabBarStyle({
color: '#8E8E93',
selectedColor: '#FFFFFF',
backgroundColor: '#1C1C1E',
borderStyle: 'black'
});
my.setTabBarStyle({
color: '#666666',
selectedColor: '#108ee9',
backgroundColor: '#FFFFFF',
borderStyle: 'white'
});
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'
});
}