跳到主要内容

用微搭实现徽标数场景

徽标数在业务场景中，比较常见，例如消息通知、物流提醒等，本篇文档主要介绍在微搭中如何利用基础组件实现徽标数功能

alt text

实现步骤​

  1. 为了快速构建场景，在微搭中使用“图标导航”区块

alt text

  1. 在左侧大纲树节点“循环展示”下的第一层普通容器组件，将其定位设置成“相对”

alt text

  1. 在“循环展示”组件里添加"普通容器"组件作为徽标数容器，普通容器需要设置宽高、边框、圆角半径、定位及外边距样式，具体如下图标记

alt text

  1. 在上述步骤添加的徽标数“普通容器”下添加“文本”组件，文本内容输入徽标数值，这里以“1”为例

alt text

  1. 可以看到徽标数预览效果

alt text