【ionic4】——仿QQ消息提醒

做项目过程中遇到一个需求，就是有新的信息增加了之后要有一个数量显示，然后就想到了类似QQ的新消息提示

效果如下：

具体实现：

HTML页面：

CSS样式：

TS中数据来源：

新建一个Model：

 public conditiongradeModelList = new Array<ConditiongradeModel>();// 查询所有期数下的入职信息GetOnschool() {// const api = 'NO1System/no1/awardDetailsController/SelectAllInSchoolOrganization';const api = 'NO1System/no1/offerCheck/selectAllInSchoolOrganization';this.http.get(api).subscribe((Response: any) => {if (Response.json().status = 'ok') {this.onschoolList = Response.json().data;for (let i = 0; i < this.onschoolList.length; i++) {this.conditiongradeModel = new ConditiongradeModel();this.conditiongradeModel.organizationId = this.onschoolList[i].organizationId;this.conditiongradeModel.organizationName = this.onschoolList[i].organizationName;this.conditiongradeModel.checkState = this.onschoolList[i].checkState;this.conditiongradeModelList.push(this.conditiongradeModel);// 根据期数查询当前期数下所有人的入职信息this.sum = 0;const url = 'NO1System/no1/offerCheck/GetByOrganization?organizationId=' + Response.json().data[i].organizationId;this.http.get(url).subscribe((Res: any) => {this.sum = this.sum + Res.json().data.length; // 统计按期查的总人数this.OfferList = Res.json().data;this.conditiongradeModelList[i].conlist = this.OfferList;this.display = false;if (this.sum === 0) {this.display = true;}});}}});}

页面显示效果：

【ionic4】——仿QQ消息提醒相关推荐

Android开发之高仿QQ消息侧拉删除
Android开发之高仿QQ消息侧拉删除 QQ消息的侧滑删除效果之炫酷,想必大家都见过吧,本人作为一名安卓开发人员,遇到如此炫酷的效果,怎能不研究一番呢,现本人已实现其基本功能,现将代码贴出,望各位大 ...
微信小程序之『仿 QQ 消息气泡拖拽消失』
转载:请写明掘金原文链接及作者名 '小小小' 一个潜心研究小程序QQ群:139128168 ← 点击加群今天带来的是仿QQ消息气泡拖拽消失特效,源码中很多地方还是有很多不足,希望大家一起齐心协力,给 ...
仿QQ消息气泡拖拽效果
此次的自定义View是仿qq消息列表,消息气泡拖拽效果. 1.原理介绍:自定义view,绘制原始点圆,touch点圆,然后将两圆用贝塞尔曲线连接并填充. 2.应用WindowManager,将自定义v ...
Android仿QQ消息拖拽效果（二）
前言本文参考辉哥贝塞尔曲线 - QQ消息汽包拖拽,前面我们使用二阶贝塞尔曲线绘制了拖拽圆点效果Android仿QQ消息拖拽效果(一)(二阶贝塞尔曲线使用),这里我们在此基础之上实现仿QQ消息拖拽爆炸 ...
Android高仿QQ消息列表、侧拉删除菜单按钮效果
目录(本篇字数:3000) 介绍 Item布局自定义存放Item父容器 Bug分析 ·一.解决滑动冲突二.解决Item点击事件的冲突三.限制只能有一个menu被打开博文续篇 ListV ...
微信客服之qq消息提醒
当用户有消息进入微信公众平台,让接口自动回复消息到客服QQ上,达到及时回复的目的 <?php/******************************************* 发送QQ信息 ...
[转载]jquery 消息插件--仿QQ消息弹出提醒
做网站时要实现一个功能,就是定时刷新由客人自己下的在线预定订单,然后提醒她们及时处理,正好jquery.messager.js可以帮我们轻松实现此功能,通过定时查询数据库记录,并通过消息插件弹出提醒她 ...
鹅厂系列三 : 仿QQ消息拖动小球
未来会怎样,我不知道,我只是想为了比今天好老规矩,看看效果嗯,前面自定义了两个视图容器,今天这个是自定义View,开始自定义前,我们应该理清自己的思路,怎么来做这个东西.用我们的QQ,我们会发现, ...
Android 仿QQ消息界面
values 下面 dimens.xml <resources><!-- Default screen margins, per the Android Design guideli ...

【ionic4】——仿QQ消息提醒

【ionic4】——仿QQ消息提醒相关推荐

最新文章

热门文章