uni-app 设置tabBar的setTabBarBadge购物车/消息等角标

本文主要是介绍uni-app 设置tabBar的setTabBarBadge购物车/消息等角标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、效果

请添加图片描述

二、代码实现

只要使用uni.setTabBarBadge和uni.removeTabBarBadge来进行对红点的设置和移除。

主要代码：

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

二、全部代码

注意： 以下代码在使用页面和首页都添加上，才能保证一进入小程序首页，可以直接看到人脉处有无红点。

1.index.vue

首页页面

<script>export default {data() {return {tabBarNum: '' //底部消息数量}},onLoad() {this.footMsgFun()  //调用底部方法},onShow() {this.footMsgFun()  //调用底部方法},methods: {//底部：人脉红点显示footMsgFun() {var that = thisthis.$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>

2.cart.vue

购物车页面

<script>export default {data() {return {tabBarNum: '' //底部消息数量}},onLoad() {this.footMsgFun()  //调用底部方法},onShow() {this.footMsgFun()  //调用底部方法},methods: {//底部：人脉红点显示footMsgFun() {var that = thisthis.$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>

三、真实案例

		onLoad() {this.getCartData();},onShow() {this.getCartData();},mounted() {this.getCartData();},methods: {getCartData() {let self = this;self.isloadding = true;self._get('index/index', {url: self.url}, function(res) {self.cart_total_num = res.data.cart_total_num;if (self.cart_total_num > 0) {uni.setTabBarBadge({index: 3, text: String(self.cart_total_num), });} else { uni.removeTabBarBadge({index: 3 });}});},
}