返回

消息通知-内容更新提示小红点如何实现?

前端

消息通知中的内容更新提示小红点,是一种常见且实用的交互设计。当有新内容或信息时,小红点会出现在通知入口,提示用户查看。这种设计可以有效吸引用户注意,增加用户与产品的互动。

实现内容更新提示小红点的方法有很多,最常规的做法是有用户登录态的情况,将用户的已读时间录入至后台的用户数据信息。当有新内容或信息时,后台会对比已读时间和发布时间,如果发布时间晚于已读时间,则在通知入口显示小红点。

如果没有用户登录态,则需要通过其他方式来判断用户是否已读。一种常见的方法是使用浏览器的本地存储功能,将用户的已读信息存储在本地。当有新内容或信息时,可以通过对比本地存储的已读信息和发布时间来判断是否需要显示小红点。

除了以上两种方法,还有一些其他方法可以实现内容更新提示小红点。例如,可以使用服务器端推送技术,在有新内容或信息时直接向客户端推送消息,客户端收到消息后在通知入口显示小红点。

在实现内容更新提示小红点时,需要注意以下几点:

  • 小红点的位置应醒目,但不要过于突兀,以免分散用户的注意力。
  • 小红点的颜色应与通知入口的颜色相匹配,以免产生视觉冲突。
  • 小红点的大小应适中,以免影响用户的美观。
  • 小红点应在有新内容或信息时才显示,以免误导用户。

内容更新提示小红点是一种非常实用的交互设计,可以有效吸引用户注意,增加用户与产品的互动。在实现时,需要注意上述几点,以确保小红点提示的最佳效果。

示例代码:

def show_red_dot(user_id, content_id):
    """
    显示小红点提示

    Args:
        user_id: 用户ID
        content_id: 内容ID
    """

    # 查询用户已读时间
    read_time = get_user_read_time(user_id, content_id)

    # 查询内容发布时间
    publish_time = get_content_publish_time(content_id)

    # 如果发布时间晚于已读时间,则显示小红点
    if publish_time > read_time:
        show_red_dot_on_notification_entrance()

def get_user_read_time(user_id, content_id):
    """
    获取用户已读时间

    Args:
        user_id: 用户ID
        content_id: 内容ID
    """

    # 从数据库中查询用户已读时间
    read_time = database.execute("SELECT read_time FROM user_read_time WHERE user_id = ? AND content_id = ?", (user_id, content_id))

    # 如果已读时间不存在,则返回默认时间
    if read_time is None:
        return datetime.fromtimestamp(0)

    # 否则,返回已读时间
    else:
        return read_time

def get_content_publish_time(content_id):
    """
    获取内容发布时间

    Args:
        content_id: 内容ID
    """

    # 从数据库中查询内容发布时间
    publish_time = database.execute("SELECT publish_time FROM content WHERE content_id = ?", (content_id,))

    # 如果发布时间不存在,则返回默认时间
    if publish_time is None:
        return datetime.fromtimestamp(0)

    # 否则,返回发布时间
    else:
        return publish_time

def show_red_dot_on_notification_entrance():
    """
    在通知入口显示小红点
    """

    # 在通知入口元素上添加小红点样式
    notification_entrance.add_class("red-dot")