uniapp 圆形进度条 设配各个版本基座

<template> <view class="zx-progress"> <canvas class="progress_bg" canvas-id="cpbg"></canvas> <canvas class="progress_bar" canvas-id="cpbar"></canvas> <view class="progress" > <view class="progressbox" > <image src="../../static/progress/progress1.png" mode="widthFix" class="img1"></image> <image src="../../static/progress/progress2.png" mode="widthFix" class="img2"></image> <image src="../../static/progress/progress3.png" mode="widthFix" class="img3"></image> <image src="../../static/progress/progress4.png" mode="widthFix" class="img4"></image> </view> </view> <view class="progress_text"> <p class="title">{{progress_txt}}%</p> <p class="subtitle">{{progress_txt}}</p> </view> </view> </template> <script> var that export default { name:"zx-progress", props:{ //进度百分比 progress_per:{ type: Number, default:90, }, //文案 progress_txt:{ type: String, default:'已使用空间', }, //圆环颜色 progress_ring_color:{ type: String, default:'#fff', }, //进度颜色 progress_color:{ type: String, default:'#00FFDD', }, }, data() { return { //px和rpx比例 scale:0, }; }, mounted: function() { that = this const system = uni.getSystemInfoSync() this.scale = system.windowWidth / 750 this.drawProgressbg(); this.drawCircle(this.progress_txt); //参数为1-100 }, methods: { drawProgressbg: function() { // 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/> var ctx = uni.createCanvasContext('cpbg', this); ctx.setLineWidth(4); // 设置圆环的宽度 ctx.setStrokeStyle(progress_ring_color); // 设置圆环的颜色 ctx.setLineCap('round'); // 设置圆环端点的形状 ctx.beginPath(); //开始一个新的路径 ctx.arc(130*this.scale,130*this.scale, 124*this.scale, 0,2*Math.PI, false); //设置一个原点(110,110)，半径为100的圆的路径到当前路径 ctx.stroke(); //对当前路径进行描边 ctx.draw(); }, drawCircle: function(step) { var ctx = uni.createCanvasContext('cpbar', this); // 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标) var gradient = ctx.createLinearGradient(28, 55, 192, 55); ctx.beginPath(); // 参数step 为绘制的百分比 step = (step * 0.01)+0.1; let i =0.01 let time = setInterval(function(){ i+=0.01 if(i>step){ clearInterval(time) } gradient.addColorStop('0', progress_color); gradient.addColorStop('1.0', progress_color); ctx.setLineWidth(4); ctx.setStrokeStyle(gradient); ctx.setLineCap('round'); ctx.arc(130*that.scale,130*that.scale, 124*that.scale, -2*Math.PI*(0.1), -2*Math.PI*(i), true); ctx.stroke(); ctx.draw(); },10) } } } </script>c <style lang="scss"> .zx-progress{ position: relative; width: 260rpx; height: 260rpx; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; // border: 1px solid #000; border-radius: 50%; .progress_bg { position: absolute; width: 260rpx; height: 260rpx; } .progress_bar { width: 260rpx; height: 260rpx; } .progress_txt { position: absolute; font-size: 28rpx; color: #999999; } .progress_info { font-size: 36rpx; padding-left: 16rpx; letter-spacing: 2rpx; font-size: 52rpx; color: #333333; } .progress_dot { width: 12rpx; height: 12rpx; border-radius: 50%; background-color: #fb9126; } .progress{ position: absolute; bottom: 60rpx; left: 0; .progressbox{ position: relative; image{ width: 400rpx; position: absolute; top: 0; left: -80px; animation: myfirst 3s linear infinite alternate; } .img1{ animation-delay: 0s; } .img2{ animation-delay: 0.8s; } .img3{ animation-delay: 1.2s; } .img4{ animation-delay: 1.8s; } } } .progress_text{ width: 100%; height: 100%; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; position: absolute; top: 0; left: 0; p{ flex:0 0 100%; color: #fff; } .title{ font-size: 68rpx; } .subtitle{ font-size: 28rpx; } } @keyframes myfirst { from {left: -80px;} to {left: 0rpx;} } } </style>