https://github.com/ronffy/wepy-com-progress-circle

wepy的第三方组件：圆形进度条
https://github.com/ronffy/wepy-com-progress-circle

weapp wepy wepy-com

Last synced: 2 months ago
JSON representation

wepy的第三方组件：圆形进度条

• Host: GitHub
• URL: https://github.com/ronffy/wepy-com-progress-circle
• Owner: ronffy
• License: mit
• Created: 2018-06-05T10:58:44.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-21T06:39:24.000Z (over 6 years ago)
• Last Synced: 2024-04-15T15:34:03.957Z (9 months ago)
• Topics: weapp, wepy, wepy-com
• Language: JavaScript
• Size: 26.4 KB
• Stars: 9
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wepy - wepy-com-progress-circle：基于Wepy框架的圆形进度条

README

        

# 微信小程序wepy的第三方组件：圆形进度条

[![npm](https://img.shields.io/npm/v/wepy-com-progress-circle.svg)](https://www.npmjs.com/package/wepy-com-progress-circle)

![](http://oxk008h6r.bkt.clouddn.com/demo.png)

## 说明

官方支持的进度条只有条形进度条，没有圆形进度条，因此增加了一个圆形进度条。

此组件是wepy的第三方组件，因为需要依赖[wepyjs](https://github.com/Tencent/wepy)

## 使用

### 安装组件

```shell

npm install wepy-com-progress-circle --save

```

### 使用组件

```javascript

// index.wpy

    

    import wepy from 'wepy';

    import ProgressCircle from 'wepy-com-progress-circle';

    export default class Index extends wepy.page {

        components = {

            progresscircle: ProgressCircle

        };

        data = {

          percent: 25, 

        }

    }

```

### 如何设置从 0% - 100% 的动画

```javascript

// index.wpy

    

    import wepy from 'wepy';

    import ProgressCircle from 'wepy-com-progress-circle';

    export default class Index extends wepy.page {

        components = {

            progresscircle: ProgressCircle

        };

        data = {

          percent: 0, 

        };

        onLoad(){

            let s = setInterval(() => {

                this.percent = this.percent + 1;

                this.$invoke('progresscircle', 'upPercent', this.percent)

                if (this.percent > 99) {

                    clearInterval(s);

                }

            }, 1000);

        }

    }

```

## API说明

### 属性介绍

    

        

            属性名类型默认值说明

        

    

    

        

            percentFloat0百分比0~100

        

        

            widthNumber100圆的宽度

        

        

            showInfoBooleantrue是否显示百分比

        

        

            strokeWidthNumber6进度条线的宽度，单位px

        

        

            colorColor#09BB07进度条颜色

        

        

            backgroundColorColor#eee进度条背色颜色

        

    

### 方法介绍

-   upPercent 根据传的参数值设置百分比