Badge 徽标

红点、数字或文字。用于告诉用户待处理的事物或者更新数。

扫码体验：
Badge 徽标 - 图1

属性名描述类型默认值必选
text展示的数字或文案String / Numberfalse
dot不展示数字，只有一个小红点Booleanfalse
overflowCount展示封顶的数字值，超出部分用“+”号表示Number99false

slots

slotName说明
inner可选，badge作为wrapper时，用于渲染内部的区域

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "list": "mini-antui/es/list/index",
  5.     "list-item": "mini-antui/es/list/list-item/index",
  6.     "badge": "mini-antui/es/badge/index"
  7.   }
  8. }
  1. <view>
  2.   <list>
  3.     <block a:for="{{items}}">
  4.       <list-item
  5.         arrow="{{true}}"
  6.         index="{{index}}"
  7.         key="items-{{index}}"
  8.         last="{{index === (items.length - 1)}}"
  9.       >
  10.         <view>
  11.           <badge a:if="{{item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}">
  12.             <view slot="inner" style="height: 26px; width: 26px; background-color: #ddd;"></view>
  13.           </badge>
  14.           <text style="margin-left: {{ item.isWrap ? '12px' : '0' }}">{{item.intro}}</text>
  15.         </view>
  16.         <view slot="extra">
  17.           <badge a:if="{{!item.isWrap}}" text="{{item.text}}" dot="{{item.dot}}" overflowCount="{{item.overflowCount}}" /> 
  18.         </view>
  19.       </list-item>
  20.     </block>
  21.   </list>
  22. </view>
  1. Page({
  2.   data: {
  3.     items: [
  4.       {
  5.         dot: true,
  6.         text: '',
  7.         isWrap: true,
  8.         intro: 'Dot Badge',
  9.       },
  10.       {
  11.         dot: false,
  12.         text: 1,
  13.         isWrap: true,
  14.         intro: 'Text Badge',
  15.       },
  16.       {
  17.         dot: false,
  18.         text: 99,
  19.         isWrap: false,
  20.         intro: '数字',
  21.       },
  22.       {
  23.         dot: false,
  24.         text: 100,
  25.         overflowCount: 99,
  26.         isWrap: false,
  27.         intro: '数字超过overflowCount',
  28.       },
  29.       {
  30.         dot: false,
  31.         text: 'new',
  32.         isWrap: false,
  33.         intro: '文字',
  34.       },
  35.     ],
  36.   },
  37. });

原文: https://docs.alipay.com/mini/component-ext/badge