用微搭实现徽标数场景
徽标数在业务场景中,比较常见,例如消息通知、物流提醒等,本篇文档主要介绍在微搭中如何利用基础组件实现徽标数功能
实现步骤
- 为了快速构建场景,在微搭中使用“图标导航”区块
- 在左侧大纲树节点“循环展示”下的第一层普通容器组件,将其定位设置成“相对”
- 在“循环展示”组件里添加"普通容器"组件作为徽标数容器,普通容器需要设置宽高、边框、圆角半径、定位及外边距样式,具体如下图标记
- 在上述步骤添加的徽标数“普通容器”下添加“文本”组件,文本内容输入徽标数值,这里以“1”为例
- 可以看到徽标数预览效果