Badge 徽章

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-badge": "wuss-weapp/w-badge/index",
  3. }

图片演示

Badge 徽章 - 图1

代码演示

  1. <w-pane title="Badge" desc="徽章" />
  3. <view bindtap="a">
  5.     <w-pane desc="显示数量徽章" />
  6.     <view class="wuss-class-round">
  7.         <w-badge catchtap="topR" value="99" ></w-badge>
  8.     </view>
  10.     <w-pane desc="显示数量徽章 max 属性设置最大值" />
  11.     <view class="wuss-class-round">
  12.         <w-badge catchtap="topR" max="99" value="100" ></w-badge>
  13.     </view>
  15.     <w-pane desc="icon数量徽章" />
  16.     <view class="wuss-class-icon">
  17.         <w-icon
  18.             type="home"
  19.             size="36px"
  20.             color="#333333"
  21.         />
  22.         <w-badge catchtap="topR" type="info" icon="android" value="3" ></w-badge>
  23.     </view>
  25.     <w-pane desc="徽章 自定义类型" />
  26.     <view class="wuss-class-round">
  27.         <w-badge catchtap="topR" styles="line-height:15px;">hot</w-badge>
  28.     </view>
  30.     <w-pane desc="徽章 圆点型" />
  31.     <view class="wuss-class-round">
  32.         <w-badge catchtap="topR" styles="background:red;" type="round"></w-badge>
  33.     </view>
  35. </view>

API

Attribute 属性

属性 说明 类型 默认值
icon 添加按钮图标 string -
iconColor string -
iconSize string -
openType 设置开放数据,可选值为[contact\ share\ getUserInfo\ openSetting\ feedback] string -
type 按钮样式类型，可选值为[] string -
bgColor 自定义背景颜色 string -
color 自定义按钮颜色 string -
styles 按钮的自定义样式 string -
inline boolean -
max 最大值 number,string -
value number,string -

Event 事件

事件名 说明 参数

Slot 插槽

名称 说明

Class 自定义类名

类名 说明
wuss-class 根节点样式类
wuss-button-hover-class 无