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

原理:

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

文件结构:

c01e2a63101cbc18b26f2eaeede8e182.png

index.html    --  列表

detail            --  详情

remind          -- js组件

调用方法:

index.html说明:

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

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

34f71cb1a526936fd78aa9d2e35610a5.png

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

5a3fc00b5cad6626386542e670312c99.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值