Uniapp官方demo提供数字角标库,可直接使用。

1、关于角标显示问题,最常见的应用就是未读消息显示,当未读消息为0时,在text元素中的值置为0,角标依然存在,且显示为0。经过尝试,在uni-badge不能使用display  hidden来隐藏元素。需要使用以下构造来实现角标隐藏。

<view v-if="show" class="grid-dot">
	<uni-badge  text="1" type="error" />
</view>

当show为true显示,为false隐藏。

2、角标数值  赋值给text

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐