小程序圆环进度条

一需求

小程序中要展示进度要求类似示例图用圆环形式展示进度那这该如何实现呢这一篇文章主要讲的就是这样一个功能。

二实现

实现的大致流程是把圆环进度条封装成一个组件然后在需要使用此组件的页面引入。

1progress实现代码

<template><view classprogress_box><canvas classprogress_bg canvas-idcpbg:style{width:progress_widthpx,height:progress_heightpx}></canvas><canvas classprogress_bar canvas-idcpbar:style{width:progress_widthpx,height:progress_heightpx}></canvas><view classresult><view stylefont-size: 44rpx;font-weight: 650;letter-spacing: 4rpx;>进度</view><view classpercentage>{{value%}}</view></view></view></template><script>export default {props: {value: {type: Number,default: 0,required: true},progress_time: {type: Number,default: 1500},progress_width: {type: Number,default: 250},progress_height: {type: Number,default: 250},border_width: {type: Number,default: 30},bg_color: {type: String,default: gray},start_color: {type: String,default: #0091FF},end_color: {type: String,default: #0091FF},},data() {return {percent: 0, // 保存进度值的变化前后值用于比较用}},mounted() {this.drawProgressbg();this.drawCircle(this.value);},methods: {// 背景drawProgressbg: function() {// 自定义组件实例 this 表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>let ctx  uni.createCanvasContext(cpbg, this);ctx.setLineWidth(this.border_width);ctx.setStrokeStyle(this.bg_color);ctx.setLineCap(round);ctx.beginPath();ctx.arc(125, 125, 100, 0 * Math.PI, 2 * Math.PI, false);ctx.stroke();ctx.draw();},// 画圆递归调用drawCircle: function(step) {if (step  0) return;let time  Math.floor(this.progress_time / 100)let ctx  uni.createCanvasContext(cpbar, this);let gradient  ctx.createLinearGradient(28, 55, 192, 55);gradient.addColorStop(0, this.start_color);gradient.addColorStop(1.0, this.end_color);ctx.setLineWidth(this.border_width);ctx.setStrokeStyle(gradient);ctx.setLineCap(butt);ctx.beginPath();step  0.02 * step-0.5;ctx.arc(125, 125, 100, -0.5 * Math.PI, step * Math.PI, false);ctx.stroke();ctx.draw();if (this.value > this.percent) {this.percentsetTimeout(() > {this.drawCircle(this.percent)},time)}}}};</script> <style>.progress_box {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center;} .progress_bg {position: absolute; }.result{position: absolute;top: 35%;width: 50%;color: #0091FF;}.percentage{font-size: 75rpx;color: #0091FF;margin-top: 20rpx;}</style>

2:使用progress

<template><view classmain>        <view>            <progress:valuevalue></progress>           </view></view></template><script>import Progress from /components/progress/index.vueexport default {components: {Progress},data() {return {value:50,};},onLoad() {this.init()},// onShow() {// this.init()// },methods: {    }};</script><style langscss scoped></style>

3:说明

三效果