小程序开发框架

# 介绍

圆环形的进度条组件，支持进度渐变动画。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-circle": "/miniprogram_npm/m-ui/mx-circle/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

value属性表示进度条的目标进度。

<mx-circle value="{{ 30 }}" text="text" />

# 宽度定制

通过stroke-width属性来控制进度条宽度。

<mx-circle value="{{ value }}" stroke-width="6" text="宽度定制" />

# 颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<mx-circle
  value="{{ value }}"
  layer-color="#eeeeee"
  color="#ee0a24"
  text="颜色定制"
/>

# 渐变色

color属性支持传入对象格式来定义渐变色。

<mx-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />

Page({
  data: {
    value: 25,
    gradientColor: {
      '0%': '#ffd01e',
      '100%': '#ee0a24',
    },
  },
});

# 逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<mx-circle
  value="{{ value }}"
  color="#07c160"
  clockwise="{{ false }}"
  text="逆时针"
/>

# 大小定制

通过size属性设置圆环直径

<mx-circle value="{{ value }}" size="90" text="大小定制" />

# API

# Props

参数 说明 类型 默认值
value 目标进度 number 0
type 指定 canvas 类型，可选值为 2d string -
size 圆环直径，默认单位为 px number 64
color 进度条颜色，传入对象格式可以定义渐变色 string,object #267AFF
layer-color 轨道颜色 string #EEEEEE
fill 填充颜色 string -
speed 动画速度（单位为 value/s） number 50
text 文字 string -
text-size 文本字体大小 string 14
stroke-width 进度条宽度 number 6
clockwise 是否顺时针增加 boolean true

# Slot

名称 说明
- 自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖

← 折叠面板（collapse） →