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-
iconColorstring-
iconSizestring-
openType设置开放数据,可选值为[contact|share|getUserInfo|openSetting|feedback]string-
type按钮样式类型，可选值为[]string-
bgColor自定义背景颜色string-
color自定义按钮颜色string-
styles按钮的自定义样式string-
inlineboolean-
max最大值number,string-
valuenumber,string-

Event 事件

事件名说明参数

Slot 插槽

名称说明

Class 自定义类名

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