徽标（Badge）为红点、数字或文字，用于告诉用户待处理的事物或者更新数。
| 属性名 |
类型 |
默认值 |
描述 |
必选 |
| text |
String / Number |
– |
展示的数字或文案。 |
false |
| dot |
Boolean |
– |
不展示数字，只有一个小红点。 |
false |
| overflowCount |
Number |
99 |
展示封顶的数字值，超出部分用 + 号表示。 |
false |
slots
| slotName |
说明 |
| inner |
可选，badge 作为 wrapper 时，用于渲染内部的区域。 |
代码示例
{ "defaultTitle": "小程序 AntUI 组件库", "usingComponents": { "list": "mini-antui/es/list/index", "list-item": "mini-antui/es/list/list-item/index", "badge": "mini-antui/es/badge/index" }}
<view> <list> <block a:for="{{items}}"> <list-item arrow="{{true}}" index="{{index}}" key="items-{{index}}" last="{{index === (items.length - 1)}}" > <view> <badge a:if="{{item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}"> <view slot="inner" style="height: 26px; width: 26px; background-color: #ddd;"></view> </badge> <text style="margin-left: {{ item.isWrap ? '12px' : '0' }}">{{item.intro}}</text> </view> <view slot="extra"> <badge a:if="{{!item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}" overflowCount="{{item.overflowCount}}" /> </view> </list-item> </block> </list></view>
Page({ data: { items: [ { dot: true, text: '', isWrap: true, intro: 'Dot Badge', }, { dot: false, text: 1, isWrap: true, intro: 'Text Badge', }, { dot: false, text: 99, isWrap: false, intro: '数字', }, { dot: false, text: 100, overflowCount: 99, isWrap: false, intro: '数字超过 overflowCount', }, { dot: false, text: 'new', isWrap: false, intro: '文字', }, ], },});
