vant-weapp/packages/circle/README.md

Circle 环形进度条

介绍

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

引入

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

"usingComponents": {
  "van-circle": "@vant/weapp/circle/index"
}

代码演示

基础用法

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

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

宽度定制

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

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

颜色定制

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

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

渐变色

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

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

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

逆时针方向

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

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

大小定制

通过size属性设置圆环直径。

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

API

Props

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

Slots

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