微信小程序之圆形进度条微信小程序之圆形进度条
需求概要需求概要
小程序中使用圆形倒计时，效果图：
(此图片来源于网络，如有侵权，请联系删除! )
思路思路
1. 使用2个 canvas 一个是背景圆环，一个是彩色圆环。
2. 使用 setInterval 让彩色圆环逐步绘制。
解决方案解决方案
第一步先写结构第一步先写结构
一个盒子包裹2个canvas以及文字盒子；
盒子使用相对定位作为父级，flex布局，设置居中；
一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"
另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"
代码如下：
// wxml
<view class="container">
<view class='progress_box'>
<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas>
<canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas>
<view class="progress_text">
<view class="progress_dot"></view>
<text class='progress_info'> {{progress_txt}}</text>
</view>
</view>
</view>
// wxss
.progress_box{
position: relative;
width:220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
}
.progress_bg{
position: absolute;
width:220px;
height: 220px;
}
.progress_canvas{
width:220px;
资源评论
weixin_38664427
- 粉丝: 3
- 资源: 924
