html图片滚动红点_前端实现未读消息提醒小红点

原理：

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

文件结构：

index.html    --  列表

detail            --  详情

remind          -- js组件

调用方法：

index.html说明：

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

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

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中存储的查看数据更新；

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！