微信小程序 实现圆形进度条

将进度条百分比分成两种情况(顺时针方向,起点在顶部):

  • 百分比 <=50%
  • 百分比 >50%

将整个圆,也对应分成左右两个部分:左半边和右半边。假设表示进度的颜色为黄色,圆环底部颜色为灰色

第一种情况:百分比 percent <= 50%,转换为度数(360 * percent)为 deg

  • 圆环底部灰色。
  • 设置左半边圆环的颜色为黄色,然后顺时针旋转 deg 度。
  • 设置右半边圆环的颜色为灰色,然后顺时针旋转 180 度。

第二种情况:百分比 percent > 50%,转换为度数(360 * percent)为 deg

  • 圆环底部灰色。
  • 设置左半边圆环的颜色为黄色,然后顺时针旋转 180 度。
  • 设置右半边圆环的颜色为黄色,然后顺时针旋转 (deg - 180) 度。

微信小程序 实现圆形进度条_第1张图片
代码见 css圆环

你可能感兴趣的:(问题记录,小程序)