本文主要和大家分享微信小程序实现圆形进度条实例，希望能帮助到大家。
小程序中使用圆形倒计时，效果图：
思路
使用2个canvas 一个是背景圆环，一个是彩色圆环。
使用setInterval 让彩色圆环逐步绘制。
解决方案
第一步先写结构
一个盒子包裹2个canvas以及文字盒子；
盒子使用相对定位作为父级，flex布局，设置居中；
一个canvas，使用绝对定位作为背景，canvas-id="canvasProgressbg"
另一个canvas，使用相对定位作为进度条，canvas-id="canvasProgress"
代码如下：
1 2 3 4 5 6 7 8 9 10 | <view>
<view>
<canvas> </canvas>
<canvas> </canvas>
<view>
<view></view>
<text> {{progress_txt}}</text>
</view>
</view></view>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .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;
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;
}
|
第二步数据绑定
从wxml中可以看到我们使用了一个数据progress_txt，所以在js中设置data如下：
1 2 3 | data: {
progress_txt: '正在匹配中...',
},
|
第三步canvas绘制
敲黑板，划重点
1. 先绘制背景
在js中封装一个画圆环的函数drawProgressbg，canvas 画圆
在onReady中执行这个函数；
小程序canvas组件与H5的canvas有点差别，请查看文档，代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | drawProgressbg: function(){
var ctx = wx.createCanvasContext('canvasProgressbg')
ctx.setLineWidth(4);
ctx.setStrokeStyle('#20183b');
ctx.setLineCap('round')
ctx.beginPath();
ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.draw();
},
onReady: function () {
this.drawProgressbg();
},
|
看一下效果如下：
2. 绘制彩色圆环
在js中封装一个画圆环的函数drawCircle，
在onReady中执行这个函数；
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | drawCircle: function (step){
var context = wx.createCanvasContext('canvasProgress');
var gradient = context.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop("0", "#2661DD");
gradient.addColorStop("0.5", "#40ED94");
gradient.addColorStop("1.0", "#5956CC");
context.setLineWidth(10);
context.setStrokeStyle(gradient);
context.setLineCap('round')
context.beginPath();
context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
context.stroke();
context.draw()
},
onReady: function () {
this.drawProgressbg();
this.drawCircle(2)
},
|
| this.drawCircle(0.5) 效果如下： | this.drawCircle(1) 效果如下： | this.drawCircle(2) 效果如下： |
 |  |  |
3. 设置一个定时器
在js中的data设置一个计数器 count,一个步骤step,一个定时器
在js中封装一个定时器的函数countInterval，
在onReady中执行这个函数；
1 2 3 4 5 6 7 8 9 | data: {
progress_txt: '正在匹配中...',
count:0,
countTimer: null
},
countInterval: function () {
this.countTimer = setInterval(() => {
if (this.data.count <p>最终效果<br><span class="img-wrap"><img src="https://img.php.cn/upload/article/000/054/025/16596bd53660412feef9b46f649ce103-5.gif" alt="微信小程序实现圆形进度条实例分享" ></span></p><p>相关推荐：</p><p><a href="http://www.php.cn/css-tutorial-383392.html" target="_self">实例讲解canvas实现圆形进度条动画</a></p><p><a href="http://www.php.cn/xiaochengxu-378492.html" target="_self">微信小程序实现圆形进度条方法介绍</a></p><p><a href="http://www.php.cn/xiaochengxu-367074.html" target="_self">有关圆形进度条基础入门教程推荐</a></p><p class="article fmt article__content"><br></p><p class="comments-box-content"><br></p>
|
以上就是微信小程序实现圆形进度条实例分享的详细内容。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
