微信小程序自定义组件实现环形进度条

本文实例为大家分享了微信小程序实现环形进度条的具体代码，供大家参考，具体内容如下

微信小程序自定义组件官方教程

环形进度条的组件已经放在开源代码库上

环形进度条效果图

创建步骤

1、在根目录创建名为成分的文件夹，用来放需要引用的自定义组件。2、创建名为帆布环的文件夹，用来放环形进度条自定义组件。3、鼠标指着帆布环的文件夹鼠标右键"新建组件"取名帆布戒指。

结构图：

环形进度条组件的代码

canvas-ring.json

{ 'component': true，//这一定要写成真的使用组件' : {} //可以引入其他自定义组件}canvas-ring.wxml

画布样式=' width : { { canvasWidth } } px ' height : { { canvasWidth } } px ' canvas-id=' circle bar ' cover-view class=' circle-bar-wrap ' style=' height : { { canvasWidth } } px；'cover-view class=' font " { title } }/cover-view cover-view class=' val ' style=' color : { { value color } }；margin-top:{{isMarginTop？20 ' : ' 0 ' } } rpx ' { { value } } { {后缀} }/封面视图/封面视图/运河地段/槽帆布圈。页面样式表。圆形条形包装{宽度： 100%;显示： flex flex-方向：柱；正义-内容：中心；align-items:居中；文本对齐：中心；盒子尺寸：边框盒子；划水： 0.20%;}.圆形条形包装字体{最大高度： 62 rpxfont-size : 26rpx飞越：隐藏；文本溢出：省略号；显示器：-网络套件-盒子；-web套件-面向盒子的：垂直；-网套件-线夹：2；白色space:正常；}.圆形条形包装val { margin-top : 20 rpx；font-size : 50 rpxheight : 65 rpx } canvas-ring . js

var windwights=wx。getsysteminfosync().窗口宽度组件({ options : { multipleslot 3360 true//在组件定义时的选项中启用多狭槽支持}, /** * 组件的属性列表*/properties: { //画布的宽度默认占屏幕宽度的0.4倍canvaswidth : { type : Number，value: windWidth * 0.4 }，//线条宽度默认10线宽： {类型：数字，值： 10 },//线条颜色默认# 393 ' line color : { type : String，value: '#393' }，//标题默认"完成率" title: { type: String，value: '完成率' }, //当前的值默认45值： {类型：数字，值： 45 },//值的颜色默认# ff9c 07 ' value color : { type : String，value: '#ff9c07' }，//最大值默认100最大值： {类型：数字，值： 100 }， //最小值默认0最小值： {类型：数字，值： 0 },//当前值的后缀名后缀： { type: null，值："%"}，//从什么角度开始0~360之间(12点方向为0,18点方向为180,0点方向为360)开始等级： {类型：数字，值： 0 } },/** *组件的初始数据*/data : { canvaswidth :风宽* 0.4，isMarginTop: true }，/** *组件的方法列表*/methods : { showCanvasRing(){//去掉首位空格后如果标题为空，那么当前值的区域就没有上边距值如果(this.data.title.replace(/(^\s*)|(\s*$)/g). 长度==0){ this。setdata({ ismarginto p : false })}//作画var CTX=wx。createcanvascontext('圆栏'，this)；//画布组建封装，需要后加个这个var circle _ r=这个。数据。canvaswidth/2；//画布的一半，用来找中心点和半径var起始度=这个。数据。开始程度；//从什么角度开始var MaxValue=this。数据。MaxValue//最大值var minValue=this。数据。minValue//最小值定义变量值=这个。数据。价值；//当前的值var LineColor=this。数据。LineColor//线条颜色变化线宽=这个。数据。线宽；//线条宽度var percent=360 *(value-minValue)/(maxValue-minValue))；//计算结果//定义起始点ctx.translate(circle_r，circle _ r)；//灰色圆弧CTX。begin path()；CTX。setstrokestyle(' # ebeb ')；ctx.setLineWidth(线宽);(0，0，circle_r - 10，0，2 * Math .PI，真);CTX。笔画()；CTX。close path()；//有色彩的圆弧CTX。begin path()；CTX。setstrokestyle(LineColor)；ctx.setLineWidth(线宽);ctx.arc(0，0，circle_r - 10，startDegree * Math .PI/180 - 0.5 *数学，百分比*数学/180开始度*数学PI/180 - 0.5 *数学，假);CTX。笔画()；CTX。close path()；CTX。draw()；} }})使用环形进度条组件

index.json

{ '使用ComPonents ' : { ' canvas-ring ' : '/ComPonents/canvas-ring/canvas-ring ' } }索引。页面结构

canvasRing id=' canvasRing ' value=' { { c _ val } } '/canvasRing index。射流研究…

onReady:函数(){ var=this那个。canvasRing=那个。select component(' # canvasRing ')；那个。canvasring。showcanvasring()；},组件的属性介绍

环形进度条的组件已经放在开源代码库上

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。