跳到主要内容

用微搭实现徽标数场景

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

alt text

实现步骤

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

alt text

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

alt text

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

alt text

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

alt text

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

alt text