uniapp原生tabbar设置并添加数字角标或小红点提示功能

更新时间：2023年08月04日 11:13:53 作者：海鸥两三

这篇文章主要给大家介绍了关于uniapp原生tabbar设置并添加数字角标或小红点提示功能的相关资料,在相应的页面中完成对消息的处理,如果有新消息,则在tabBar页面中显示红点提醒用户,需要的朋友可以参考下

普通用法

uni.showTabBarRedDot

uni.showTabBarRedDot({ //显示红点 
	index: 4 //tabbar下标
})

如下图所示：

uni.setTabBarBadge

uni.setTabBarBadge({ //显示数字  
	index: 4, //tabbar下标
	text: '6' //数字
})

如下图所示：

uni.removeTabBarBadge

uni.removeTabBarBadge({ //隐藏数字标
	index: 2 //tabbar下标
})

uni.hideTabBarRedDot

uni.hideTabBarRedDot({ //隐藏红点
	index: 2 //tabbar下标
})

实际应用

在我的界面如果有待用户阅读条数大于0，则在该tabbar(我的)顶部显示小红点。

onshow(){
 setTimeout(() => {
	th.allRedDot = 所有待阅读数量相加
	if (th.allRedDot > 0) {
		uni.showTabBarRedDot({ //显示红点 
			index: 4 //tabbar下标
		})
	}			
 }, 1000)
}

注意事项

在页面加载的时候调用。
支付宝开发者工具上面的红点样式比较丑，但是不用调整。真机调试样式会准确些也相对好看。
加定时器的原因是因为页面还没计算清楚红点个数就会往后运行，给计算红点个数一点时间，这样就不会导致红点不显示。（个人看法）

附：uniapp之设置小技巧

使用uniapp 通常会遇到进入详情页，需要修改标题文字，uniapp自带的方法就可以修改代码如下：

uni.setNavigationBarTitle({
            title:this.i18n.user.title
        });

1.修改底部tabar

uni.setTabBarItem({
            index: 0,
            text: this.i18n.tabs.home
        });

2.为 tabBar 某一项的右上角添加文本。

uni.setTabBarBadge({
  index: 0,
  text: '1'
})

3.移除 tabBar 某一项右上角的文本。

uni.setTabBarBadge({
  index: 0,//删除某个tabar右上角文字，由左到右依次
})

仅仅是记录以后好查询，官方api 也可以查询的

总结

到此这篇关于uniapp原生tabbar设置并添加数字角标或小红点提示功能的文章就介绍到这了,更多相关uniapp tabbar设置数字角标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript屏蔽Backspace键的实现代码
这篇文章主要介绍了JavaScript屏蔽Backspace键的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-11-11
Canvas实现动态粒子文字效果的代码示例
这篇文章主要介绍了如何用Canvas实现动态粒子文字效果,文中有完整的代码示例,文章通过代码介绍的非常清楚,感兴趣的小伙伴跟着小编一起来看看吧
2023-08-08
JavaScript中async await更优雅的错误处理方式
async/await中的异常处理很让人混乱,尽管有很多种方式来应对async 函数的异常,但是连经验丰富的开发者有时候也会搞错,所以这篇文章主要给大家介绍了关于JavaScript中async await更优雅的错误处理方式的相关资料,需要的朋友可以参考下
2021-09-09
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
像平时购物选择地址时一样，通过选择的省动态加载城市列表，通过选择的城市动态加载县区列表，从而可以实现省市县的三级联动，下面使用原生的JavaScript来实现这个功能，需要的朋友参考下吧
2016-02-02
TypeScript中let和var的区别介绍
这篇文章主要介绍了TypeScript let与var的区别,主要从作用域等这几个方面做详细介绍，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
JavaScript迭代器与生成器使用详解
迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现，这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下
2022-11-11
JS中的reduce()方法使用小结
这篇文章主要介绍了JS中的reduce()方法使用小结,文章通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-08-08
浅谈JavaScript中的this指针和引用知识
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。接下来通过本文给大家介绍js中的this指针和引用，非常不错，需要的朋友参考下
2016-08-08
20个拿来就能用的JavaScript技巧分享
这篇文章主要来和大家一起探讨一下20 种 JavaScript 技巧和窍门,每种技巧和窍门都有通俗易懂的示例,让我们一起来提升你的 JavaScript 技能吧
2023-10-10
Webwork 实现文件上传下载代码详解
WebWork 当然也提供了很友好的拦截器来实现对文件的上传，让我们可以专注与业务逻辑的设计和实现，在实现上传和下载时顺便关注了下框架上传下载的实现
2016-02-02