bao-wecom
小程序环形进度条组件。
案例demo
使用方法
1. 安装组件
npm install --save bao-wecom
2. 构建 npm
点击开发者工具中的菜单栏：工具 --> 构建 npm
3. 环形进度条
在页面的 json 配置文件中添加 bao-wecom-circle 自定义组件的配置
{
"usingComponents": {
"bao-wecom-circle": "bao-wecom/circle/index"
}
}
WXML 文件中引用 bao-wecom-circle
<bao-wecom-circle ></bao-wecom-circle>
bao-wecom-circle 的属性介绍如下：
| 字段名 | 类型 | 必填 | 描述 |
|---|---|---|---|
| value | number | 是 | 目标进度 |
| start | string | 否 | 轨道起点，top:起点为圆的上部，bottom:起点为圆的下部，left:起点为圆的左侧，right:起点为圆的右侧;默认top |
| end | string | 否 | 轨道终点，top:终点为圆的上部，bottom:终点为圆的下部，left:终点为圆的左侧，right:终点为圆的右侧;默认top ，如果起点和终点相同，则轨道是一个圆 |
| color | string、object | 否 | 进度条颜色，传入对象格式可以定义渐变色，例如：{ ‘0%’: ‘#ffd01e’, ‘100%’: ‘#ee0a24’ }, 默认 #1989fa |
| size | number | 否 | 圆环直径，默认为 90 px |
| layerColor | string | 否 | 轨道颜色，默认为 #ffffff |
| fill | string | 否 | 填充颜色 |
| speed | number | 否 | 动画速度（单位为 value/s），默认50 |
| text | string | 否 | 填充文字，有值则插槽不生效 |
| strokeWidth | number | 否 | 进度条宽度，默认4 |
| clockwise | boolean | 否 | 是否逆时针旋转，默认为false |
尺寸不能自适应啊. 换成rpx 单位的就更好了
能否可滑动的