[Bottom message red dot prompt] When uniapp develops applets, use uni.setTabBarBadge to set the red dot of the bottom menu

1. The effect achieved

Function description: No matter which menu bar at the bottom is clicked, you can see the red dot notification displayed under the second menu bar.

If it is only set on the current page of the network, when you switch uni.setTabBarBadgeto the page of the first menu bar after calling the method to set the red dot on the page of the second menu bar, you will not be able to see the red dot on the second menu bar of.

Solution: If you want to see the red dot of the second menu bar on the page of the first menu bar, you need to manually call the uni.getTabBarBadge method on the page of the first menu bar to get the red dot of the second menu bar Status, and then display the corresponding red dot according to the returned result.

2. Code implementation

Just use uni.setTabBarBadgeand uni.removeTabBarBadgeto set and remove the red dot.

Main code:

//设置红点
uni.setTabBarBadge({
    
    
	index: 1, // 底部菜单栏的索引（从0开始）
	text:'99', // 要显示的文本（必须是字符串类型）
});
//移除红点
uni.removeTabBarBadge({
    
    
	index: 1 // 底部菜单栏的索引（从0开始）
});

Full code:

Only with the following code 人脉页面和首页都添加上can you ensure that once you enter the homepage of the mini program, you can directly see whether there is a red dot on the contact.

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				tabBarNum: '' //底部消息数量
			}
		},
		onLoad() {
    
    
			this.footMsgFun()  //调用底部方法
		},
		onShow() {
    
    
			this.footMsgFun()  //调用底部方法
		},
		methods: {
    
    
			//底部：人脉红点显示
			footMsgFun() {
    
    
				var that = this
				this.$api.appPlateForm('POST', this.$url.all_message, '', function(res) {
    
    
					if (res.code == '200') {
    
    
						//1.获取到接口里，消息的数量
						that.tabBarNum = res.data.num
						
						//2.关键代码：设置红点
						if (that.tabBarNum > 0) {
    
    //设置底部消息通知
							uni.setTabBarBadge({
    
    
								index: 1, // 人脉页面在底部菜单栏的索引
								text: String(that.tabBarNum), // 要显示的文本（必须是字符串类型）
							});
						} else {
    
      //移除底部消息通知
							uni.removeTabBarBadge({
    
    
								index: 1 // 人脉页面在底部菜单栏的索引
							});
						}
					}
				})
			},
			
		}
	}
</script>

ok~ it's done here!!!