专注于小程序圆环形进度条的小工具

专注于在小程序中实现圆环形进度条的工具

小程序目前有很多第三方ui组件，基本都是以组件的形式引入使用，如果项目风格比较贴近第三方，那么这些成套的三方组件库是比较方便，不过如果只是使用三方ui库某几个组件的话，安装一个非常大的库则不太合理。

mp-progress目标文件体积小于7KB，方便的js调用方式和原生的canvas标签写法，非常适用于希望保留高度控制权的项目。

$ npm install mp-progress --save 基础库要求

根据文档要求，支持 2.7.0 及以上的基础库版本，使用最新基础库效果最佳

使用微信原生小程序的方式引入npm包需要有额外的配置，具体可以查看 https://developers.weixin.qq.com/community/develop/article/doc/0008aecec4c9601e750be048d51c13

在对应页面引入组件，初始化data并在wxml中使用组件

由于组件实现差异，该方式在wepy中不适用

{ "navigationBarTitleText": "首页", "usingComponents": { "mpProgress": "mp-progress/dist/component/mp-progress" } } ... // 参数使用方式相同，canvasSize默认是400*400 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: 10 } ... <mpProgress config="{{config}}" percentage="{{percentage}}"></mpProgress>

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

该方式适用于wepy，但必须在onReady回调函数里面进行初始化

传入的单位是rpx，即如果canvas宽度为400rpx，则传入400，后续会自动计算真实尺寸

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> 显示模式

效果	解析
	正常模式（默认）
	百分比模式（只需要按需求传入percent即可，相见参数说明）

考虑到进度条在一个页面可能多次更新，所以当组件实例化完成之后，需要手动调用draw方法去画图

如何设置弧线端点样式

可以在barStyle中任何一个参数项增加lineCap参数，例如：barStyle: [{width: 12, lineCap: 'round', fillStyle: '#56B37F'}]，lineCap有效值可以查看文档

必须在2.7.0版本以上的SDK运行

组件已经采用微信最新的同层渲染方法，该方法要求SDK版本不低于2.7.0

dotStyle

如果dotStyle包含shadow的话，为了保证shadow在圆环的所有都可以完整展示，会自动缩减进度条的半径

进度动画

目前动画只在barStyle最后一个元素的定义中起作用，每一帧的动画为总动画的2%

文字展示效果

实现代码可以参考：

<view class="garage-status"> <canvas class="canvas" type="2d" id="progress"></canvas> <view class="status-ctn"> <view class="status-count">127/127</view> <view class="desc-text">适用车位剩余</view> </view> </view>

问题反馈