做网站需要的语言,磁力搜索,龙岩新罗区建设局网站,网站备案期间 权重目录 一、效果二、代码实现二、全部代码1.index.vue2.cart.vue 三、真实案例参考最后 一、效果 二、代码实现
只要使用uni.setTabBarBadge和uni.removeTabBarBadge来进行对红点的设置和移除。
主要代码#xff1a;
//设置红点
uni.setTabBarBadge({index: 1, // 底部菜单栏… 目录 一、效果二、代码实现二、全部代码1.index.vue2.cart.vue 三、真实案例参考最后 一、效果 二、代码实现
只要使用uni.setTabBarBadge和uni.removeTabBarBadge来进行对红点的设置和移除。
主要代码
//设置红点
uni.setTabBarBadge({index: 1, // 底部菜单栏的索引从0开始text:99, // 要显示的文本必须是字符串类型
});
//移除红点
uni.removeTabBarBadge({index: 1 // 底部菜单栏的索引从0开始
});二、全部代码
注意 以下代码在使用页面和首页都添加上才能保证一进入小程序首页可以直接看到人脉处有无红点。
1.index.vue 首页页面 scriptexport 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 // 人脉页面在底部菜单栏的索引});}}})},}}
/script2.cart.vue 购物车页面 scriptexport 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 });}});},
}参考
官网 参考使用这个大佬
大佬2
最后 感觉文章好的话记得点个心心和关注和收藏有错的地方麻烦指正一下如果需要转载,请标明出处多谢
