微信小程序进度条组件自定义数字_微信小程序之圆形进度条（自定义组件）

思路

使用2个canvas 一个是背景圆环，一个是彩色圆环。

使用setInterval 让彩色圆环逐步绘制。

在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的.

它们的缺点为:

1.组件必须用js实例化 (如果我有一个任务列表,后面会显示每个任务的进度,每个任务都必须实例化)

2.它们js实例化时,绘图是用 px绘制,导致页面用rpx布局,组件却用px绘制.

修改后的组件

在components文件加下建立  circle组件,如图

circle.js :

/*components/circle/circle.js*/Component({

options: {

multipleSlots:true //在组件定义时的选项中启用多slot支持

},

properties: {

draw: {//画板元素名称id

type: String,

value:'draw'},

per:{//百分比 通过此值转换成step

type: String,

value:'0'},

r:{//半径

type: String,

value:'50'}

},

data: {/*私有数据，可用于模版渲染*/step:1, //用来算圆的弧度0-2

size:0, //画板大小

screenWidth:750, //实际设备的宽度

txt:0},

methods: {/**<