前言 今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览 效果很简单,就是这种的小卡片似的效果. 我们先开始写UI页面,可自定义消息内容以及关闭按钮的样式. Notification.vue <template> <transition name="fade" @after-enter="handleAfterEnter"> <div class="notif

前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot + rabbitmq 做智能家居> 中说过可以用 rabbitmq 的 MQTT 协议做智能家居的指令推送,里边还提到过能用 MQTT 协议做 web 的消息推送,而未读消息(小红点)功能刚好应用到实时消息推送了. MQTT 协议就不再赘述了,没接触过的同学翻翻前边的文章温习一下吧,今天还是主要以实践

github: https://github.com/hellovoidworld/HVWWeibo   A.获取登陆用户未读消息 1.需求 获取所有未读消息,包括新微博.私信.@.转发.关注等 把未读消息数显示在相应的tabItem上 把总的未读消息数显示在app图标上 当app进入后台,仍然需要刷新未读消息数量数据 读取了未读消息之后清空计数 监听tabBarItem的点击,刷新数据(例如重复点击"首页"要刷新微博)       2.思路 使用微博提醒API获取未读消息 使用定时器

http://www.51itong.net/android-badgenumber-9789.html Android系统 小米/三星/索尼 应用启动图标未读消息数(BadgeNumber)动态提醒 在Android手机上,如QQ.微信当有未读消息的时候.我们可以看到在应用的启动图标的右上角会有一个红色圈圈.且圈圈里会动态显示未读消息的数目,如下图显示:  那么该功能是怎么实现的呢? 在万能的互联网搜索和翻阅了大量相关资料.也请教了一些技术群里的大咖们.从他们那里我获知.提取了一些关键词:第三

上一篇介绍了贝塞尔曲线的简单应用 仿360内存清理效果 这一篇带来一个  两条贝塞尔曲线的应用 : 仿qq未读消息去除效果. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50503630 老规矩,先上效果图: qq的未读消息去除很炫酷,其实就是用了两条贝塞尔曲线,我们按思路来,先来画两个圆,及两条贝塞尔曲线,辅助点为圆心y坐标的一半.我们把下面移动的圆,叫做mMoveCircle. 这样一画,就很简单明了了对不对.只要在拖动的时候

新消息来了,在桌面的Laucher图标上显示新消息数 /** * 应用桌面图标未读消息显示工具类 * 只支持 小米,三星和索尼 */ public class BadgeUtil { final static String LAUNCHER_ACTIVITY_NAME = "com.wenki.example.activity.SplashActivity"; public static void setBadgeCount(Context context, int count) {

一.效果 二.简单用法 超级简单,2行代码集成:xib可0代码集成,只需拖一个view关联LFBadge类即可 //一般view上加角标 _badge1 = [[LFBadge alloc] init]; [_badge1 addToView:_view1]; //BarButtonItem上加角标 _badge2 = [[LFBadge alloc] init]; [_badge2 addToBarButtonItem:self.navigationItem.rightBarButtonIte

 Android BGABadgeView:新消息/未接来电/未读消息/新通知圆球红点提示(1) 现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示,典型的以微信.QQ新消息提示为例,当微信朋友圈有新的朋友更新/发布朋友圈消息后,在微信的底部切换卡上会有一个红色的小圆球红点,表示有新消息,提示用户查看. 这种红色小圆点小圆球的实现方式很多种,简单期间,一个简单思路:可以用一个Framelayout里面套一个TextView(如果有未读消息数目)或者一个圆形shape显示,以红

以小米手机系统为例,当安装的某个APP有未读消息时,就会在该APP图标的右上角显示未读消息的数目.本文主要解说怎样用Python语言实现图标显示未读消息的数目.首先,还是要用到Python中PIL库,关于Linux下怎样安装PIL库,请大家參考这篇博客:http://blog.csdn.net/kevin_zhai/article/details/47720721,里面有具体的安装过程.实现的原理非常easy,直接用Image读取原始图标.然后将未读消息的数目插入到图标的右上角就可以. 脚本代码

在上一篇博客<Android 高仿微信(QQ)滑动弹出编辑.删除菜单效果,增加下拉刷新功能>里,已经带着大家学习如何使用SwipeMenuListView这一开源库实现滑动列表弹出菜单,接下来,将进一步学习,如何为不同的list item呈现不同的菜单,此处我们做一个实例:Android 高仿QQ滑动弹出菜单标记已读.未读消息,看下效果图: 1. 创建项目,并导入SwipeMenuListView类库 2. 创建消息实体bean: public class Msg { public int i

public void jumpUnread(boolean cycle) { List<ContactLogModel> dataList = adapter.getContactLogModelList(); int dataSize = dataList.size(); int position = 0; if (cycle) { position = 0; } else { position = ListView().getFirstVisiblePosition(); } Confi

我们要实现的效果如下: 我们使用系统自带的,实际上,代码量很少,在我们要显示的按钮上,打上下面一句代码即可: self.tabBarItem.badgeValue = @"1"; 同时设置图标和按钮的代码: /** * 获得未读数 */ - (void)setupUnreadCount { //获取未读数具体方法 //最终返回一个数字,如: int count=10; // 设置提醒数字(微博的未读数) NSString *status = [NSString stringWithFo

实现原理: 其实是自定义一个view,将view添加到UITabBar上面,也可以是一个按钮,设置背景图片,和label.废话少说直接上代码搞一个UITabBar的分类 #import <UIKit/UIKit.h> @interface UITabBar (badge) - (void)showBadgeOnItemIndex:(int)index; - (void)hideBadgeOnItemIndex:(int)index; @end #import "UITabBar+ba

#!/usr/bin/pythonfrom PIL import Image ,ImageDraw, ImageFont#打开所在的文件im=Image.open('test.jpg')#获取图片对象的宽和高w,h=im.size#创建对象,把字体设置为高的1/4,如果数字多为个位应该加小点font = ImageFont.truetype('/Library/Fonts/arial.ttf', int(h/4))# 绘制圆形,第一个参数界定绘制区域,我选择了宽高为原图1/3的右上角区域# 不难

  如图类似的 这样的需求还挺多的,那么如何实现呢? data: { userInfo: {}, projectSource: 'https://github.com/liuxuanqiang/wechat-weapp-mall', userListInfo: [ { icon: '../../images/iconfont-dingdan.png', text: '我的订单', isunread: true, unreadNum: 2 }, { icon: '../../images/icon

只需要一个<i>标签,放在需要的文本后面即可 ex:<span>待解决问题<i></i><span> i{ display:block; background:#f00; border-radius:50%; width:0.4em; height:0.4em; top:0px; right:-0.2em; position:absolute; }

一.什么是消息未读 消息未读包括会话未读和总未读.前者指的是当前用户和某一聊天方的未读消息数,后者指的是当前用户的所有未读消息数,也就是所有会话未读的和.比如用户A收到用户B的2条消息,还收到用户C的3条消息,则用户A与B的会话未读数是2,用户A与C的会话未读数是3,用户A的总未读是5.   二.消息未读的维护 会话未读和总未读数一般都是单独维护的.这是因为: 1)总未读的使用场景较多,会被高频使用.如APP角标未读展示: 2)如果不单独维护,则总未读数需要通过计算所有的会话未读数,一旦会话数较

效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱,靠谱的又没有平滑效果,所以还是得自己写,主要是模仿了微信的一些定位逻辑 首先,要滚动到指定的坐标出,可以借用recyclerview自带的几个方法,但是无论哪个方法首先得需要指定position,所以第一件事情就是先把position找准确了 上面代码就是查询出可见条目开始最近的一条未读item的

VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> <link rel="stylesheet" type=&

关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不多时.我们来实现自己的对话框和消息框. 对话框 要求:可拖动.点击按钮后可回调 画一个简单的模型框 <div class="hi-dialog-box clearfix">     <div class="hi-dialog-title">系统提

在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的展示和处理效果,其中包括Element的el-table组件,以及其他第三方类组件,如vue-easytable.vue-willtable,以及vxe-table,针对性的对比相关的差异. 1.el-table表格组件 这个是Element的表格组件,使用参考地址如下:https://elemen