要点:
css旋转让元素平均分布在圆上 setInterval函数事件 小圆圈和环形进度条跳动的速度一致 小程序开发环境
代码:
html
< van-circle
value = " {{ rate }}"
stroke-width = " 6"
color = " {{ gradientColor }}"
size = " 400rpx"
layer-color = " #f0fcfe"
speed = " {{speed}}"
>
< view class = " countdown-box" >
< view class = " count-box" >
< view class = " count" > {{ count }}</ view>
< view class = " unit" > S </ view>
</ view>
< view
class = " c-start"
style = " transform: rotate( { { ( 360 / sum) * count } } deg) "
>
</ view>
</ view>
</ van-circle>
js
Page ( {
data : {
sum : 10 ,
count : 10 ,
rate : 100 ,
gradientColor : {
"0%" : "#75e3f7" ,
"100%" : "#75e3f7" ,
} ,
speed : 5000 ,
timer : null
} ,
onLoad ( options ) { } ,
onReady ( ) { } ,
onShow ( ) {
let timer = setInterval ( ( ) => {
this . countdownEvent ( ) ;
} , 1 * 1000 ) ;
this . setData ( { timer } ) ;
} ,
countdownEvent ( ) {
let { count, rate, sum } = this . data;
if ( count == 0 ) {
clearInterval ( this . data. timer) ;
return ;
}
count = count - 1 ;
rate = ( 100 / sum) * count;
this . setData ( { rate } ) ;
wx. nextTick ( ( ) => {
this . setData ( { count } ) ;
} ) ;
}
} ) ;
css
.countdown-box {
width : 400rpx;
height : 400rpx;
display : flex;
align-items : center;
justify-content : center;
flex-direction : column;
border-radius : 50%;
position : relative;
}
.count-box {
display : flex;
align-items : baseline;
justify-content : center;
}
.count {
font-family : SourceHanSansCN-Bold;
font-size : 138rpx;
color : #4e9df2;
}
.unit {
font-family : SourceHanSansCN-Regular;
font-size : 48rpx;
color : #333333;
}
.c-start {
width : 40rpx;
height : 40rpx;
background : linear-gradient ( #f9fdfe, #b6eefa, #82e4f7) ;
border-radius : 50%;
position : absolute;
top : -20rpx;
left : 50%;
margin-left : -20rpx;
transform-origin : 20rpx 214rpx;
box-sizing : border-box;
}