微信小程序之圆形进度条实现思路


Posted in Javascript onFebruary 22, 2018

需求概要

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

微信小程序之圆形进度条实现思路

思路

  • 使用2个canvas 一个是背景圆环,一个是彩色圆环。
  • 使用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; 
// 这里的宽高是必须大于等于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;
}

第二步数据绑定

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

data: {
 progress_txt: '正在匹配中...', 
 },

第三步canvas绘制

敲黑板,划重点

1. 先绘制背景

  1. 在js中封装一个画圆环的函数drawProgressbg,canvas 画圆
  2. 在onReady中执行这个函数;

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

drawProgressbg: function(){
 // 使用 wx.createContext 获取绘图上下文 context
 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);
 //设置一个原点(100,100),半径为90的圆的路径到当前路径
 ctx.stroke();//对当前路径进行描边
 ctx.draw();
 },
 onReady: function () {
 this.drawProgressbg(); 
 },

看一下效果如下:

微信小程序之圆形进度条实现思路

2. 绘制彩色圆环

  1. 在js中封装一个画圆环的函数drawCircle,
  2. 在onReady中执行这个函数;
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(); 
 // 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
 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中执行这个函数;

data: {
 progress_txt: '正在匹配中...', 
 count:0, // 设置 计数器 初始为0
 countTimer: null // 设置 定时器 初始为null
 },
 countInterval: function () {
 // 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
 this.countTimer = setInterval(() => {
 if (this.data.count <= 60) {
 /* 绘制彩色圆环进度条 
 注意此处 传参 step 取值范围是0到2,
 所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
 */
  this.drawCircle(this.data.count / (60/2))
 this.data.count++;
 } else {
 this.setData({
  progress_txt: "匹配成功"
 }); 
 clearInterval(this.countTimer);
 }
 }, 100)
 },
 onReady: function () {
 this.drawProgressbg();
 // this.drawCircle(2) 
 this.countInterval()
 },

最终效果

微信小程序之圆形进度条实现思路

总结

以上所述是小编给大家介绍的微信小程序之圆形进度条实现思路,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
webpack下实现动态引入文件方法
Feb 22 #Javascript
JavaScript 有用的代码片段和 trick
Feb 22 #Javascript
3种vue路由传参的基本模式
Feb 22 #Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 #Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
队列在编程中的实际应用(php)
2010/09/04 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
Symfony生成二维码的方法
2016/02/04 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python 支付整合开发包的实现
2019/01/23 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
Python----数据预处理代码实例
2019/03/20 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
2014年妇联工作总结
2014/11/21 职场文书
普通员工辞职信范文
2015/05/12 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书