微信小程序之圆形进度条

来源:月影

segmentfault.com/a/1190000013219501

需求概要

小程序中使用圆形倒计时,效果图:

思路

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

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

第一步先写结构

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

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

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

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

代码如下:

第二步数据绑定

从wxml中可以看到我们使用了一个数据progress_txt,所以在js中设置data如下:

第三步canvas绘制

敲黑板,划重点。

1.先绘制背景

在js中封装一个画圆环的函数drawProgressbg,canvas 画圆

在onReady中执行这个函数;

小程序canvas组件与H5的canvas有点差别,请查看文档,代码如下:

看一下效果如下:

2.绘制彩色圆环

在js中封装一个画圆环的函数drawCircle,

在onReady中执行这个函数;

代码如下:

效果:

3.设置一个定时器

在js中的data设置一个计数器 count,一个步骤step,一个定时器

在js中封装一个定时器的函数countInterval,

在onReady中执行这个函数;

代码如下:

最终效果

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180212B0Z6BI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励