微信小程序純css制作圓形進度條所遇到的問題

wrapBox：最外層盒子，背景色為進度條的顏色

leftBox/rightBox：半寬等長 左/右浮動的盒子，背景色為灰色

roundMask：居中的盒子 用來遮蓋leftBox和rightBox

基本原理：

當進度小於180度，rightBox以左中點為原點進行旋轉

當進度大於180度，rightBox位置不變 背景變成灰色，leftBox以右中點為原點進行旋轉，旋轉度數=進度-180

 

問題：rpx在轉換成px時有誤差 導致小圓不在中心位置 border-radius計算不准確

解決辦法：寬高、位置用百分比，border-radius根據windowWidth自己算

代碼：

<template>
<view class="wrapBox" style="background:{{color}};width:{{circleWidth}}rpx;height:{{circleWidth}}rpx;">
<view class="leftBox" style="width:50%;height:100%;border-radius:{{radius}}rpx 0 0 {{radius}}rpx;transform:rotateZ({{deg>180?deg-180:0}}deg)"></view>
<view class="rightBox" style="width:50%;height:100%;border-radius:0 {{radius}}rpx {{radius}}rpx 0;background:{{deg>180?color:'#F0F0F0'}};transform: rotateZ({{deg>180?0:deg}}deg)"></view>
<view class="roundMask" style="width:{{maskWidth}}%;height:{{maskWidth}}%;background:{{backgroundColor}}"></view>
</view>
</template>
 
<script>
import wepy from 'wepy'
export default class Progress extends wepy.component {
props = {
color: {
type: String,
default: "#FFD600"
},
deg: {
type: Number,
default: 0
},
circleWidth: {
type: Number,
default: 34
},
progressWidth: {
type: Number,
default: 10
},
backgroundColor: {
type: String,
default: '#fff'
}
}
computed = {
maskWidth() {
return (1 - this.progressWidth / this.circleWidth) * 100
},
maskRadius() {
return (1 - this.progressWidth / this.circleWidth) * 50
},
radius() {
//windowWidth在app.wpy的onShow中獲取
return this.$root.$parent.globalData.windowWidth * this.circleWidth / 375
}
}
}
</script>
 
<style lang="less"> .wrapBox { position: absolute; border-radius: 50%; .leftBox, .rightBox { overflow: hidden; float: left; background: #F0F0F0; } .leftBox { transform-origin: right center; } .rightBox { transform-origin: left center; } .roundMask { position: absolute; top: 50%; left: 50%; border-radius:50%; transform: translate(-50%, -50%); } } </style>