UNIAPP native TABBAR setting and adding digital corner mark or small red dot prompt

UNIAPP native TABBAR setting and adding digital corner mark or small red dot prompt

common usage

uni.showTabBarRedDot

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

As shown below:

uni.setTabBarBadge

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

As shown below:

uni.removeTabBarBadge

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

uni.hideTabBarRedDot

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

practical application

In my interface, if the number of items to be read by the user is greater than 0, a small red dot will be displayed on the top of the tabbar (my).

onshow(){
    
    
 setTimeout(() => {
    
    
	th.allRedDot = 所有待阅读数量相加
	if (th.allRedDot > 0) {
    
    
		uni.showTabBarRedDot({
    
     //显示红点 
			index: 4 //tabbar下标
		})
	}			
 }, 1000)
}

Precautions

1. Called when the page loads.
2. The red dot style on the Alipay developer tool is ugly, but there is no need to adjust it. The real machine debugging style will be more accurate and relatively good-looking.
3. The reason for adding the timer is because the page will run backwards before the number of red dots is calculated clearly, and it will take a little time to calculate the number of red dots, so that the red dots will not be displayed. (personal opinion)