【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点

这篇具有很好参考价值的文章主要介绍了【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、实现的效果

【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点,uni-app,小程序

功能描述:无论点击底部的哪个菜单栏,都可以看到第二个菜单栏下显示的红点通知。

如果只在人脉当前页面设置的话,当你在第二个菜单栏的页面中调用uni.setTabBarBadge方法设置红点后,切换到第一个菜单栏的页面时,是无法看到第二个菜单栏的红点的。

解决方法:如果希望在第一个菜单栏的页面中看到第二个菜单栏的红点,需要在第一个菜单栏的页面中手动调用uni.getTabBarBadge方法获取第二个菜单栏的红点状态,然后根据返回的结果来显示相应的红点。

二、代码实现

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

主要代码:

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

全部代码:

以下代码在人脉页面和首页都添加上,才能保证一进入小程序首页,可以直接看到人脉处有无红点。文章来源地址https://www.toymoban.com/news/detail-532834.html

<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~到这里就完成啦!!!

到了这里,关于【底部消息红点提示】uniapp开发小程序时,使用uni.setTabBarBadge设置底部菜单的红点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包