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

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

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

环形进度条的组件已经放在github上

环形进度条效果图

创建步骤

1、在根目录创建名为components的文件夹，用来放需要引用的自定义组件。

2、创建名为canvas-ring的文件夹，用来放环形进度条自定义组件。

3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。

结构图：

环形进度条组件的代码

canvas-ring.json

{

"component": true, //这一定要写成true

"usingComponents": {} //可以引入其他自定义组件

}

canvas-ring.wxml

{{title}}

{{value}} {{suffix}}

canvas-ring.wxss

.circle-bar-wrap{

width: 100%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

box-sizing: border-box;

padding: 0 20%;

}

.circle-bar-wrap .font{

max-height: 62rpx;

font-size: 26rpx;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

white-space: normal;

}

.circle-bar-wrap .val{

margin-top: 20rpx;

font-size: 50rpx;

height: 65rpx;

}

canvas-ring.js

var windWidth = wx.getSystemInfoSync().windowWidth;

Component({

options: {

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

},

/**

* 组件的属性列表

*/

properties: {

//画布的宽度 默认占屏幕宽度的0.4倍

canvasWidth: {

type: Number,

value: windWidth * 0.4

},

//线条宽度 默认10

lineWidth: {

type: Number,

value: 10

},

//线条颜色 默认"#393"

lineColor: {

type: String,

value: "#393"

},

//标题 默认“完成率”

title: {

type: String,

value: "完成率"

},

//当前的值 默认45

value: {

type: Number,

value: 45

},

//值的颜色 默认"#ff9c07"

valueColor:{

type: String,

value: "#ff9c07"

},

//最大值 默认100

maxValue: {

type: Number,

value: 100

},

//最小值 默认0

minValue: {

type: Number,

value: 0

},

//当前值的后缀名

suffix: {

type: null,

value: "%"

},

//从什么角度开始 0~360之间 (12点方向为0,18点方向为180,0点方向为360)

startDegree: {

type: Number,

value: 0

}

},

/**

* 组件的初始数据

*/

data: {

canvasWidth: windWidth * 0.4,

isMarginTop: true

},

/**

* 组件的方法列表

*/

methods: {

showCanvasRing() {

//去掉首位空格后如果标题为空，那么当前值的区域就没有margin-top值

if (this.data.title.replace(/(^\s*)|(\s*$)/g, "").length == 0) {

this.setData({

isMarginTop: false

})

}

//作画

var ctx = wx.createCanvasContext("circleBar", this); //canvas组建封装，需要后加个this

var circle_r = this.data.canvasWidth / 2; //画布的一半，用来找中心点和半径

var startDegree = this.data.startDegree; //从什么角度开始

var maxValue = this.data.maxValue; //最大值

var minValue = this.data.minValue; //最小值

var value = this.data.value; //当前的值

var lineColor = this.data.lineColor; //线条颜色

var lineWidth = this.data.lineWidth; //线条宽度

var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果

//定义起始点

ctx.translate(circle_r, circle_r);

//灰色圆弧

ctx.beginPath();

ctx.setStrokeStyle("#ebebeb");

ctx.setLineWidth(lineWidth);

ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);

ctx.stroke();

ctx.closePath();

//有色彩的圆弧

ctx.beginPath();

ctx.setStrokeStyle(lineColor);

ctx.setLineWidth(lineWidth);

ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);

ctx.stroke();

ctx.closePath();

ctx.draw();

}

}

})

使用环形进度条组件

index.json

{

"usingComponents": {

"canvas-ring": "/components/canvas-ring/canvas-ring"

}

}

index.wxml

index.js

onReady: function() {

var that = this;

that.canvasRing = that.selectComponent("#canvasRing");

that.canvasRing.showCanvasRing();

},

组件的属性介绍

环形进度条的组件已经放在github上

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

时间： 2019-06-26