当前位置:   article > 正文

【uni-app】 动态设置 tabBar_uniapp动态设置tabbar

uniapp动态设置tabbar

uni.setTabBarItem(OBJECT)

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

setTabBar(){
	uni.setTabBarItem({
		index: 0,
		title: 'Home'
	})
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

uni.setTabBarStyle(OBJECT)

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

uni.setTabBarStyle({
  color: '#FF0000',
  selectedColor: '#00FF00',
  backgroundColor: '#0000FF',
  borderStyle: 'white'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

uni.setTabBarBadge(OBJECT)

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

uni.setTabBarBadge({
  index: 0,
  text: '1'
})
  • 1
  • 2
  • 3
  • 4

uni.removeTabBarBadge(OBJECT)

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

uni.setTabBarBadge(){
	index: 1,
	text: '10'
}
  • 1
  • 2
  • 3
  • 4

uni.showTabBarRedDot(OBJECT)

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

uni.showTabBarRedDot({
	index:1
})
  • 1
  • 2
  • 3

uni.hideTabBarRedDot(OBJECT)

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

uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

uniapp底部导航栏的点击事件

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

onTabItemTap(e){
	console.log(e)
}
  • 1
  • 2
  • 3

和onLoad等方法加在一起

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/89812
推荐阅读