700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html图片滚动红点_前端实现未读消息提醒小红点

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

时间:2024-05-01 04:29:01

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。