vant Circle 环形进度条写一个倒计时组件

要点：

1. css旋转让元素平均分布在圆上
2. setInterval函数事件
3. 小圆圈和环形进度条跳动的速度一致
4. 小程序开发环境

代码：

1. 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>

2. js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //倒计时总秒数
    sum: 10,
   //当前剩余秒数
    count: 10,
    // circle进度100%
    rate: 100,
   // circle渐变色
    gradientColor: {
      "0%": "#75e3f7",
      "100%": "#75e3f7",
    },
    //Circle速度，需要根据实际情况调整
    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;
    }
    //当前秒数-1
    count = count - 1;
    //计算当前进度条
    rate = (100 / sum) * count;
    this.setData({ rate });
    /*延迟一部分操作到下一个时间片再执行。（类似于 setTimeout）,与小圆圈和circle进度条变化速度有关*/
    wx.nextTick(() => {
      this.setData({ count });
    });
  }
});

3. css

.countdown-box {
 /*circle一致*/
  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%;
  /* left:50% 需要减去小圆圈半径 */
  margin-left: -20rpx;
  /* 旋转中心在正中间 214rpx是countdown-box半径加上外圈边框宽度一半 20rpx是因为top:20rpx*/
  transform-origin: 20rpx 214rpx;
  box-sizing: border-box;
}