uniapp开发显示小红点方式

文章类型:uniapp

发布者:hp

发布时间:2023-08-10

在使用uniapp开发过程中,某些tabBar需要显示数字,比如消息,今天整理一下方式

一:方法

1:uni.showTabBarRedDot 显示红点

uni.showTabBarRedDot({ //显示红点 
	index: 4 //tabbar下标
})

2:uni.setTabBarBadge 设置红点数值

uni.setTabBarBadge({ //显示数字  
	index: 4, //tabbar下标
	text: '6' //数字
})

3:uni.removeTabBarBadge 移除红点

uni.removeTabBarBadge({ //隐藏数字标
	index: 2 //tabbar下标
})

4:uni.hideTabBarRedDot 隐藏红点

uni.hideTabBarRedDot({ //隐藏红点
	index: 2 //tabbar下标
})

二:效果