Skip to content

TabBar

showTabBar

TIP

The API usage is as follows: wx.showTabBar(Object object)

  • Functional description: Display tabBar.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
animationbooleanfalseNoDo you need animation effects?
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

hideTabBar

TIP

The API usage is as follows: wx.hideTabBar(Object object)

  • Functional description: Hide tabBar.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
animationbooleanfalseNoDo you need animation effects?
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

setTabBarStyle

TIP

The API usage is as follows: wx.setTabBarStyle(Object object)

  • Functional description: Dynamically set the overall style of tabBar.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
colorstring-NoThe default color of text on the tab, HexColor
selectedColorstring-NoThe color of the text on the tab when it is selected, HexColor
backgroundColorstring-NoThe background color of the tab, HexColor
borderStylestring-NoThe color of the top border of the tab, only supports black/white
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

setTabBarItem

TIP

The API usage is as follows: wx.setTabBarItem(Object object)

  • Functional description: Dynamically set the content of a tabBar item.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
indexnumber-YesWhich item of the tabBar, counting from the left
textstring-NoButton text on the tab
iconPathstring-NoImage path, icon size limit is 40kb, recommended size is 81px * 81px, when position is top, this parameter is invalid
selectedIconPathstring-NoImage path when selected, icon size limit is 40kb, recommended size is 81px * 81px, when position is top, this parameter is invalid
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)
  • Sample code:
js
wx.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

showTabBarRedDot

TIP

The API usage is as follows: wx.showTabBarRedDot(Object object)

  • Functional description: Show the red dot in the upper right corner of a tabBar item.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
indexnumber-YesWhich item of the tabBar, counting from the left
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

hideTabBarRedDot

TIP

The API usage is as follows: wx.hideTabBarRedDot(Object object)

  • Functional description: Hide the red dot in the upper right corner of a tabBar item.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
indexnumber-YesWhich item of the tabBar, counting from the left
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

setTabBarBadge

TIP

The API usage is as follows: wx.setTabBarBadge(Object object)

  • Functional description: Add text to the upper right corner of a tabBar item.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
indexnumber-YesWhich item of the tabBar, counting from the left
textstring-NoIf the displayed text exceeds 4 characters, it will be displayed as ...
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)
  • Sample code:
js
wx.setTabBarBadge({
  index: 0,
  text: '1'
})

removeTabBarBadge

TIP

The API usage is as follows: wx.removeTabBarBadge(Object object)

  • Functional description: Add text to the upper right corner of a tabBar item.
  • Parameters and descriptions: Object object
PropertiesTypeDefault valueRequiredDescription
indexnumber-YesWhich item of the tabBar, counting from the left
successFunction-NoCallback function for successful interface call
failFunction-NoCallback function for failed interface call
completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)