UniApp 消息提示：图标右上角红色圆点实现方法

要在 UniApp 中实现有未读消息时图标右上角有红色圆点提示，你可以使用标记来控制圆点的显示与隐藏。以下是一种实现方式：

在你的消息组件或页面中，通过接收消息的数量或其他标记来确定是否有未读消息。
在模板中添加一个图标，例如一个小圆形的红色点。
使用条件渲染语句（v-if 或 v-show）来判断是否显示该图标。只有在有未读消息时才显示该图标。
根据你的需求，可以将这个标记放置在消息图标的右上角，可以使用绝对定位或 flex 布局来实现。

下面是一个简单的示例代码：

<template>
  <view class="container">
    <view class="message-icon">
      <image src="message-icon.png" class="icon"></image>
      <view class="badge" v-if="hasUnreadMessages">{{ unreadMessageCount }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasUnreadMessages: true, // 是否有未读消息
      unreadMessageCount: 5 // 未读消息数量
    };
  }
};
</script>

<style>
.container {
  position: relative;
  width: 100px;
  height: 100px;
}

.message-icon {
  position: relative;
}

.icon {
  width: 100%;
  height: 100%;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}
</style>

以上示例中，.container 类设置容器的大小，.message-icon 类用来包裹消息图标和圆点标记。badge 类用于设置圆点标记的样式。

你可以根据自己的需求自定义样式，并在数据中动态控制 hasUnreadMessages 和 unreadMessageCount 的值。这样，当有未读消息时，圆点标记就会显示在图标的右上角。希望这个示例能对你有所帮助！