支付宝小程序引导组件 徽标·Badge

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

扫码体验

示例代码

{
 "defaultTitle": "Badge",
 "usingComponents": {
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "badge": "mini-ali-ui/es/badge/index"
 }
}

<view>
  <block a:for="{{items}}">
    <view class="list-like" 
      index="{{index}}" 
      key="items-{{index}}">
      <view>
        <badge a:if="{{item.isWrap}}" 
          text="{{item.text}}" 
          dot="{{item.dot}}">
          <view slot="inner" 
            style="height: 24px; width: 24px; background-color: #ddd;"></view>
        </badge>
        <text style="margin-left: {{ item.isWrap ? '12px' : '0' }}">{{item.intro}}</text>
      </view>
      <view >
        <badge a:if="{{!item.isWrap}}" 
          text="{{item.text}}" 
          dot="{{item.dot}}" 
          overflowCount="{{item.overflowCount}}" 
          withArrow="{{item.withArrow}}" 
          direction="{{item.direction}}" />
      </view>
    </view>
  </block>
</view>
<view style="
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #333;
  color: #f8f8f8;">
    深色底时，stroke 可设为 true
    <badge 
      slot="extra"
      text="深色底时加描边"
      stroke="{{true}}" 
      withArrow="{{true}}" 
      direction="left" />
</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: '文字',
      },
      {
        dot: false,
        text: '22222222222222',
        isWrap: false,
        intro: '箭头中',
        withArrow: true,
        direction: 'middle',
      },
      {
        dot: false,
        text: 'left arrow',
        isWrap: false,
        intro: '箭头左',
        withArrow: true,
        direction: 'left',
      },
      {
        dot: false,
        text: 'right arrow',
        isWrap: false,
        intro: '箭头右',
        withArrow: true,
        direction: 'right',
      },
    ],
  },
});
.list-like {
  display: flex;
  background: #fff;
  padding: 12px;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

属性

slots