前言

进度条展示操作的当前进度，进度条使用场景：

• 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
• 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
• 当需要显示一个操作完成的百分比时。

小程序进度条属性介绍：

一、progress

1.普通进度条

<view class="progress-box">
  <progress percent="20" show-info stroke-width="3"/>
</view>

<view class="progress-box">
  <progress percent="40" active stroke-width="3" />
  <icon class="progress-cancel" type="cancel"></icon>
</view>

<view class="progress-box">
  <progress percent="60" active stroke-width="3" />
</view>

<view class="progress-box">
  <progress percent="80" color="#10AEFF" active stroke-width="3" />
</view>

2.圆形进度条

2.1 组件的形式使用

使用第三方组件，在项目根目录下执行命令：

npm install mp-progress --save

在需要使用的页面中配置新增mp-progress的组件定义：

"usingComponents": {
  "mpProgress": "mp-progress/dist/component/mp-progress"
}

在页面data中定义对应的数据，config参数的使用方法和之前api调用的时候完全相同，canvasSize默认是{ width: 400, height: 400 }，这种方式不同的是不需要传参数target: this，同时新增percentage（进度条的百分比）：

Page({
  data: {
    config: {
      canvasSize: {
        width: 400,
        height: 400
      },
      percent: 100,
      barStyle: [{width: 20, fillStyle: '#f0f0f0'}, {width: 20, animate: true, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}],
      needDot: true,
      dotStyle: [{r: 20, fillStyle: '#ffffff', shadow: 'rgba(0,0,0,.15)'}, {r: 10, fillStyle: '#56B37F'}]
    },
    percentage: 0
  }
});

页面使用

<mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

该方式遵从双向绑定数据的原则，当页面改变percentage，mp-progress会自动更新视图

2.2 API的形式使用

import MpProgress from 'mp-progress';
// 初始化
// 注意：在wepy中必须在onReady里调用
const mprogress = new MpProgress({
  target: this,
  canvasId: 'progress',
  canvasSize: {width: 400, height: 400},
  barStyle: [{width: 12, fillStyle: '#f0f0f0'}, {width: 12, fillStyle: [{position: 0, color: '#56B37F'}, {position: 1, color: '#c0e674'}]}]
});

// 开始绘制进度，60代表60%
mprogress.draw(60);

使用

<canvas class="canvas" type="2d" id="progress"></canvas>

其他使用方式可以看github：https://github.com/lucaszhu2zgf/mp-progress