《前端》前端数字提醒---2020年8月20日

最新推荐文章于 2026-07-24 20:20:02 发布

原创最新推荐文章于 2026-07-24 20:20:02 发布 · 826 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

CSS

本文介绍了如何使用CSS实现元素右上角的小圆点，包括使用`sup`标签和`vertical-align`属性的方法。同时提到了在Android中，通过wolfking0608的BadgeView库实现自定义的BadgeView，提供了一种简单易用的解决方案。文章列举了多个技术博客链接，详细展示了不同场景下实现数字提醒的方法。

CSS实现元素右上角的小圆点

记录两种更好的解决方案：
1.使用sup标签--定义上标文本

    <p>
        This text contains <sup>superscript上标</sup>
    </p>

2.使用css属性vertical-align

    <style>
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            /* background-color: @danger; */
            display: inline-block;
            vertical-align: super;
        }
    </style>
</head>
<body>
    <p class="dot">非</p>
</body>

2、layui的徽章

https://www.layui.com/demo/badge.html

===================

wolfking0608/BadgeView: 支持自由定制外观、拖拽消除的MaterialDesign风格Android BadgeView TextView小红点 https://github.com/wolfking0608/BadgeView

遇到这种需求,经验不是很丰富的开发者,会想到写一个相对布局,然后在相对布局,让购物车图片match_parent整个控件,让后在右上角放一个textview,

设置背景,并更改他的值就可以,

但是这样做,可以基本实现功能需求,但是你做出来的效果,有时候想过不好,textview会没又把购物车图片遮盖掉,这个时候又有人认为,可以设置textView的透明度,设置为完全不透明,这样就可以解决问题了,但是实际却不是这样

其实最简单的方法不是这样的,github 有个大神的思路就是写一个自定义类,继承TextView,重写里面的方法.这个类BadgeView

github链接: https://github.com/wolfking0608/BadgeView

如果能解决你的问题,记得点个赞!

使用起来非常简单:

就三步:

if (mCartBdgeView == null) {
//1.初始化该控件
mCartBdgeView = new BadgeView(mContext);
}
//2.设置哪个控件显示数字提醒
mCartBdgeView.setTargetView(mCartLayout);
mCartBdgeView.setBadgeGravity(Gravity.TOP | Gravity.RIGHT);
//3.设置红点数量
mCartBdgeView.setBadgeCount(count);
mCartBdgeView.setVisibility(View.VISIBLE);

如果想要特定的效果,可以点击以下链接

(4条消息)GitHub控件之BadgeView（数字提醒）_crazy_jack-CSDN博客_bagdeview  https://blog.csdn.net/crazy1235/article/details/42262369

==========

(4条消息)css购物车右上角数字效果_weixin_34194359的博客-CSDN博客_订单数字css样式 https://blog.csdn.net/weixin_34194359/article/details/92391692?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-20-92391692.nonecase&utm_term=%E5%8F%B3%E4%B8%8A%E8%A7%92%E5%B0%8F%E6%95%B0%E5%AD%972020

========================

(4条消息)设置应用图标提醒数字(右上角)_学习笔记666的博客-CSDN博客_vue 图标右上角 https://blog.csdn.net/github_26672553/article/details/48686707?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-1&spm=1001.2101.3001.4242

=====

(4条消息)前端实现消息提醒数_haoxuhong的博客-CSDN博客_前端消息提醒 https://blog.csdn.net/haoxuhong/article/details/89204893

=======

(4条消息)订单数字提醒的实现_weixin_34138139的博客-CSDN博客_css li 数字提醒 https://blog.csdn.net/weixin_34138139/article/details/86428870

=========

前端实现未读消息提醒小红点-布布扣-bubuko.com http://www.bubuko.com/infodetail-2476101.html

======

25个强大的JQuery提示插件 - Web前端 - ITeye资讯 https://www.iteye.com/news/21344