微信小程序的圆形进度条怎么做

微信小程序的圆形进度条怎么做
这次给大家带来微信小程序的圆形进度条怎么做，实现微信小程序的圆形进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

这次给大家带来微信小程序的圆形进度条怎么做，实现微信小程序的圆形进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

需求概要

小程序中使用圆形倒计时，效果图：

思路

使用2个canvas 一个是背景圆环，一个是彩色圆环。

使用setInterval 让彩色圆环逐步绘制。

解决方案

第一步先写结构

一个盒子包裹2个canvas以及文字盒子；

盒子使用相对定位作为父级，flex布局，设置居中；

一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"

另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"

代码如下：

// wxml <view> <view> <canvas> </canvas>  <canvas> </canvas>  <view>  <view></view>   <text> {{progress_txt}}</text> </view>  </view></view>// wxss.progress_box{ position: relative; width:220px; height: 220px; // 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备，下绘制的圆环跑盒子外去了// 小程序使用rpx单位适配 ，但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示 display: flex;  align-items: center; justify-content: center; background-color: #eee;}.progress_bg{ position: absolute; width:220px; height: 220px; }.progress_canvas{  width:220px; height: 220px; } .progress_text{  position: absolute;  display: flex;  align-items: center; justify-content: center}.progress_info{  font-size: 36rpx; padding-left: 16rpx; letter-spacing: 2rpx} .progress_dot{ width:16rpx; height: 16rpx;  border-radius: 50%; background-color: #fb9126;}