建站学院

当前位置:

微信小程序实现圆形进度条方法介绍

浏览量:1277次

前言

最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧。

效果图如下



初始状态

点击中间按钮开始绘制

绘制过程

绘制结束

实现思路

建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。

WXML代码

<view>
 <view>
 <canvas>
 </canvas>
 <canvas>
 </canvas>
 <view>开始动态绘制</view>
 </view></view>

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【915688610@qq.com】,我们在确认后,会立即删除,保证您的版权。