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>