【uni-app】 动态设置 tabBar

uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容,不支持的平台有钉钉小程序,字节跳动小程序

setTabBar(){
          
   
	uni.setTabBarItem({
          
   
		index: 0,
		title: Home
	})
}

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式,不支持的平台有字节跳动小程序,

uni.setTabBarStyle({
          
   
  color: #FF0000,
  selectedColor: #00FF00,
  backgroundColor: #0000FF,
  borderStyle: white
})

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

uni.setTabBarBadge({
          
   
  index: 0,
  text: 1
})

uni.removeTabBarBadge(OBJECT)

移除 tabBar 某一项右上角的文本,不支持的平台有字节跳动小程序

uni.setTabBarBadge(){
          
   
	index: 1,
	text: 10
}

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

uni.showTabBarRedDot({
          
   
	index:1
})

uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

uniapp底部导航栏的点击事件

当前需是tab页,点击底部的tab触发

onTabItemTap(e){
          
   
	console.log(e)
}

和onLoad等方法加在一起

经验分享 程序员 微信小程序 职场和发展