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

目录

一、效果

二、代码实现

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

主要代码:

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

二、全部代码

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

1.index.vue

首页页面

javascript 复制代码
<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>

2.cart.vue

购物车页面

javascript 复制代码
<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>

三、真实案例

javascript 复制代码
		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 
						});
					}
				});
			},
}

参考

官网
参考使用这个大佬

大佬2

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

相关推荐
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index5 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情12 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑00715 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字15 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔16 小时前
uniapp rpx兼容平板
uni-app
荔枝吖16 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗16 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141618 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子2 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测