Tencent Cloud Super App as a Service
- Release Notes and Announcements
- Purchasing Guide
- Plan Management
- Branded Configurations
- Introduction to Platform Functions
- Commercialization
- Virtual Payment
- Guidelines for Code Integration
- Android
- Android SDK Description
- Android API
- Mini Program Management APIs
- Custom Mini Program Capabilities
- Custom SDK Capabilities
- iOS
- iOS SDK Description
- iOS API
- Mini Program Management APIs
- Customize Mini Program Capabilities
- Customised SDK Capabilities
- Flutter
- Flutter SDK Description
- Flutter API
- Mini Program Management API
- Mini Program Capabilities Customization
- Plugin Customization
- App Server
- Payment Development Notes
- Mini Program Payment: Parameter Application and Configuration
- Mini Game Payment: Parameter Application and Configuration
- Mini Program Payment: Signature and Verification
- Guildlines for Mini Program Development
- Mini Program Code Composition
- Guidance
- Learn About Mini Programs
- Configuring Mini Program
- Mini Program Framework
- Basic Competencies
- Open Capabilities
- Framework
- Mini Program Configuration
- Framework Interface
- WXML Syntax Reference
- WXS Syntax Reference
- Components
- API
- Interface
- Media
- Device
- JS SDK
- IDE Operation Instructions
- Guildlines for Mini Game Development
- Guide
- Game Engine
- Basic Capability
- Open Capabilities
- API
- Interface
- Rendering
- Device
- Practice Tutorial
- API Documentation
- Making API Requests
- User Management APIs
- Team Management APIs
- Sensitive API-Related APIs
- Role Management APIs
- Platform Management APIs
- Other Console APIs
- Mini Program APIs
- Management-Sensitive APIs
- Global Domain Management APIs
- Application APIs
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Program DevelopmentAPIInterfaceTabBar
TabBar
Last updated: 2025-03-20 18:01:56
showTabBar
The method of utilizing this API is wx.showTabBar(Object object).
Function Description: Unveils the tabBar.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
animation | boolean | false | Not required | Is animation effect necessary? |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
hideTabBar
The usage method for this API is wx.hideTabBar(Object object)
Function Description: Conceals the tabBar.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
animation | boolean | false | Not required | Is animation effect necessary? |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
setTabBarStyle
The usage method for this API is wx.setTabBarStyle(Object object)
Function Description: Dynamically configures the overall style of the tabBar.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
color | string | - | Not required | Default text color on the tab, HexColor |
selectedColor | string | - | Not required | Text color on the tab when selected, HexColor |
backgroundColor | string | - | Not required | Background color of the tab, HexColor |
borderStyle | string | - | Not required | Color of the border on the tab, only supports black/white |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
setTabBarItem
The usage method for this API is wx.setTabBarItem(Object object)
Function Description: Dynamically sets the content of a specific tabBar item.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
index | number | - | Supported | Which item of the tabBar, counting from the left |
text | string | - | Not required | Text on the tab button |
iconPath | string | - | Not required | Image path, the icon size is limited to 40kb, with a recommended dimension of 81px * 81px. This parameter is invalid when the position is set to 'top'. |
selectedIconPath | string | - | Not required | Path of the image when selected, the icon size is limited to 40kb, with a recommended dimension of 81px * 81px. This parameter is invalid when the position is set to 'top'. |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Example Code
wx.setTabBarItem({index: 0,text: 'text',iconPath: '/path/to/iconPath',selectedIconPath: '/path/to/selectedIconPath'})
showTabBarRedDot
The usage of this API is wx.showTabBarRedDot(Object object)
Function Description: Display the red dot at the top right corner of a tabBar item.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
index | number | - | Supported | Which item of the tabBar, counting from the left |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
hideTabBarRedDot
The usage of this API is wx.hideTabBarRedDot(Object object)
Function Description: Hide the red dot at the top right corner of a tabBar item.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
index | number | - | Supported | Which item of the tabBar, counting from the left |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
setTabBarBadge
The usage of this API is wx.setTabBarBadge(Object object)
Function Description: Add text to the top right corner of a tabBar item.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
index | number | - | Supported | Which item of the tabBar, counting from the left |
text | string | - | Supported | The displayed text truncates to '...' if it exceeds 4 characters. |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Example Code
wx.setTabBarBadge({index: 0,text: '1'})
removeTabBarBadge
The usage of this API is wx.removeTabBarBadge(Object object)
Function Description: Remove the text from the top right corner of a tabBar item.
Parameters and Description: Object object.
Attributes | Types | Default value | Required | Note |
index | number | - | Supported | Which item of the tabBar, counting from the left |
success | function | - | Not required | Callback function for successful interface invocation |
fail | function | - | Not required | Callback function for unsuccessful interface invocation |
complete | function | - | Not required | Callback function executed upon the completion of the interface invocation (both successful and unsuccessful invocations) |
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No