原理:
通过将消息是否查看的数据存写入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中存储的查看数据更新;