小程序自定义圆形进度环

<view class="circle-progress" style="box-shadow: inset 0 0 0 {{width}}rpx {{bgColor}}; width:{{size}}rpx ;height:{{size}}rpx" > <view class="circle-progress-item circle-progress-item--l"> <view class="circle-progress-bar" style="transform:rotate({{progressBarLVal}}deg); width:{{size}}rpx ;height:{{size}}rpx"> <view class="huan" style="border-color:{{color}}; border-width:{{width}}rpx; "></view> </view> </view> <view class="circle-progress-item circle-progress-item--r"> <view class="circle-progress-bar" style="transform:rotate({{progressBarRVal}}deg); width:{{size}}rpx ;height:{{size}}rpx"> <view class="huan" style="border-color:{{color}}; border-width:{{width}}rpx; "></view> </view> </view> </view> .circle-progress { width: 200rpx; height: 200rpx; position: relative; box-sizing: border-box; box-shadow: inset 0 0 0 20rpx transparent; border-radius: 50%; display: flex; } .circle-progress-item { width: 50%; height: 100%; overflow: hidden; box-sizing: border-box; } /* 左半环 */ .huan { width: 50%; height: 100%; box-sizing: border-box; border-radius: 100% 0 0 100%/50%; border: 10px solid transparent; border-right: none; } /* 右侧半环旋转180度 */ .circle-progress-item--r .huan { position: absolute; right: 0; top: 0; transform: rotate(180deg); } .circle-progress-bar { width: 100%; height: 100%; } .circle-progress-item--l .circle-progress-bar { transition: all 0.2s ease-out 0.2s; } .circle-progress-item--r .circle-progress-bar { position: relative; left: -102%; transition: all 0.2s ease-in; } // pages/ring-cricle/ring-circle.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { progressPercent: { // 百分比 type: Number, value: 80, }, bgColor: { // 背景色 type: String, value: '#F4F4F4' }, color: { // 颜色 type: String, value: '#F1DE4A' }, width: { // 进度环粗细 type: Number, value: 10 }, size: { // 进度环大小 type: Number, value: 250 }, }, /** * 组件的初始数据 */ data: { progressBarLVal: -180, progressBarRVal: -180, progressValLenght: 628, }, /** * 组件的方法列表 */ methods: { dopercent: function(percent) { let progressValeR = percent; let progressLastLenght = this.data.progressValLenght * (percent / 100); let progressPercentAngle = (progressLastLenght * 360) / this.data.progressValLenght; console.log(progressPercentAngle,progressLastLenght) if(progressPercentAngle<180 || progressPercentAngle==180){ this.setData({ progressBarRVal:progressPercentAngle - 180, progressBarLVal:-180 }) }else if(progressPercentAngle > 180){ let LastPercent = progressPercentAngle - 180; console.log(LastPercent - 180) this.setData({ progressBarRVal:0, progressBarLVal:LastPercent - 180 }) } // 角度 = 弧长×360°÷（2×半径×π） // 弧长 =角度×（2×半径×π）÷ 360° }, reZero: function() { this.dopercent(0) }, doAnimation: function() { this.dopercent(this.data.progressPercent) }, }, pageLifetimes: { show: function() { this.dopercent(this.data.progressPercent) }, } })