php未读消息显示小红点,前端实现未读消息提醒小红点

古城微笑少年丶 2022-11-12 13:46 229阅读 0赞

原理：

通过将消息是否查看的数据存写入localStorage中，点击查看后，更新localStorage的数据；

文件结构：

![9e8cdb4d797c833669951e2b42ac76f3ac0.jpg][]

index.html    --  列表

detail            --  详情

remind          -- js组件

调用方法：

index.html说明：

1.列表中红点相对定位在列表文本右上角，d为数据源，amGloble.Remind(d, 'text', 'id', 'list')调用方法；

2.点击列表，会将每条数据中的文本text，唯一标识id在地址栏传给detial.html详情页；

![7099e0e460466f59e6846232c34a420d1e6.jpg][]

ul li \{

list-style: none;

padding: 8px 0;

\}

li span \{

position: relative;

\}

.point \{

position: absolute;

top: 0;

right: -5px;

width: 6px;

height: 6px;

background: red;

border-radius: 50%;

\}

vard=\[\{ text:'亚瑟', id:1\}, \{ text:'凯', id:2\}, \{ text:'露娜', id:3\}\];//d:数据， text：数据中的文本， key：数据中的唯一标识， dom：插入DOM节点的id名

amGloble.Remind(d,'text','id','list');

detail.html 说明：

1.获取地址栏参数文本text，唯一标识id；

2.如果拿到本条数据id，说明用户已经进入详情页，则将localStorage中存储的查看数据更新；

![6f834aa17f7519c1c0a85488984651a139c.jpg][]

[9e8cdb4d797c833669951e2b42ac76f3ac0.jpg]: /images/20221022/a929430621c140b2a1705a6d7f205b14.png
[7099e0e460466f59e6846232c34a420d1e6.jpg]: /images/20221022/12c984f92df8405482812e527705d487.png
[6f834aa17f7519c1c0a85488984651a139c.jpg]: /images/20221022/bcbbc2420fdc4602b2ea780fb85d173e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 app里未读消息已读、未读是怎么设计的？

![c5cf13311f8a4665b7f8869d553c301e.png][] 也不知道大家目前都用的java编程软件有哪些，毕竟在应用程序中，未读和已读消息的设计取决于

野性酷女/ 2024年03月26日 18:30/ 0 赞/ 87 阅读

相关 app里未读消息已读、未读是怎么设计的？

也不知道大家目前都用的java编程软件有哪些，毕竟在应用程序中，未读和已读消息的设计取决于应用程序的需求和目标。下面是一些常见的设计模式：一、简单的未读/已读标记简

男娘i/ 2024年03月26日 17:01/ 0 赞/ 70 阅读

相关钉钉消息已读、未读咋实现的嘞？

前言一款app，消息页面有：钱包通知、最近访客等各种通知类别，每个类别可能有新的通知消息，实现已读、未读功能，包括多少个未读，这个是怎么实现的呢？比如用户A访问了用户B

系统管理员/ 2024年03月24日 23:56/ 0 赞/ 87 阅读

相关 Android BGABadgeView：新消息/未接来电/未读消息/新通知圆球红点提示（1）

Android BGABadgeView：新消息/未接来电/未读消息/新通知圆球红点提示（1）现在很多的APP会有新消息/未接来电/未读消息/新通知圆球红点提示，典

待我称王封你为后i/ 2023年10月17日 06:19/ 0 赞/ 17 阅读

相关 css实现必填小红点

css实现必填小红点 /必填红点 / .required:after { content: '';

浅浅的花香味﹌/ 2022年12月28日 09:03/ 0 赞/ 121 阅读

相关 php未读消息显示小红点,前端实现未读消息提醒小红点

原理：通过将消息是否查看的数据存写入localStorage中，点击查看后，更新localStorage的数据；文件结构： ![9e8cdb4d797c8336699

古城微笑少年丶/ 2022年11月12日 13:46/ 0 赞/ 230 阅读

相关 Android实现小圆点显示未读功能

> 代码地址如下： > [http://www.demodashi.com/demo/13541.html][http_www.demodashi.com_demo_135

快来打我*/ 2022年05月11日 01:50/ 0 赞/ 296 阅读

相关微信小程序自定义组件：带未读数目的tabBar按钮(小红点+带未读数目)

[http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1046&extra=page%3D1%26filter%3D

短命女/ 2022年01月21日 07:11/ 0 赞/ 1637 阅读

相关用户聊天消息处理(消息分组、未读消息、已读清除等)

每条消息都要设置一个是否已读的属性消息分组: 后台返回和当前用户相关的所有消息,根据当前用户和不同用户直接的聊天标识, 返回对应

绝地灬酷狼/ 2021年07月25日 00:55/ 0 赞/ 702 阅读

相关 Mqtt实践-未读消息（小红点），前端与 RabbitMQ 实时消息推送实践

`web` 端实时消息推送，常用的实现方式比较多，但万变不离其宗，底层基本上还是依赖于 `websocket`，`MQTT` 协议也不例外。 RabbitMQ 搭建 `

喜欢ヅ旅行/ 2021年06月10日 20:40/ 0 赞/ 760 阅读