微信小程序 环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家。
小程序中使用圆形倒计时,效果图:
思路使用2个canvas 一个是背景圆环,一个是彩色圆环。
使用setInterval 让彩色圆环逐步绘制。
解决方案
第一步先写结构
一个盒子包裹2个canvas以及文字盒子;
盒子使用相对定位作为父级,flex布局,设置居中;
一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"
另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"
代码如下:// wxml
{{progress_txt}}
// 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. 先绘制背景在js中封装一个画圆环的函数drawProgressbg,canvas 画圆
在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. 绘制彩色圆环在js中封装一个画圆环的函数drawCircle,
在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()
},
最终效果
相关推荐:
微信小程序 环形进度条_微信小程序实现圆形进度条实例分享相关推荐
- 微信小程序 环形进度条_微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varNa ...
- 微信小程序进度条详解 progress 自定圆形进度条
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,progress用来实现水平进度条效果 1 基本使用 <progress percent="80& ...
- csgo卡程序关不掉_微信推QQ小程序,取代QQ?网友:这功能有用?
大家了解过俄罗斯套娃吗?就是由多个一样图案的空心木娃娃,一个套一个组成,最多可达十多个.以前,小鱼以为它只是个工艺品:谁知道,聊天工具也可以「套娃」.近日,有网友发现微信上出现了「腾讯QQ」小程序,打 ...
- 不同程序用不同网络_微信小程序直播登场,与平台直播有何不同?
星标我,不要迷路哦~ 微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交 ...
- 小程序统一服务消息_微信团队发布小程序模板消息能力调整通知:小程序订阅消息接口正式上线...
10月13日,微信团队发布了小程序模板消息能力调整通知.微信团队表示,此前的模板消息接口将停止使用,小程序订阅消息接口正式上线.据了解,新上线的小程序订阅消息,同时支持一次性和长期性订阅消息,用户可以 ...
- 小程序商店刷榜_微信小程序怎么通过“硬广”“软广”来运营引流?运营干货...
随着互联网的飞速发展,如今微信小程序已经成为家喻户晓的一款应用了,生活中随处可见的微信小程序成为了许多人日常生活中必不可少的应用.那么对于小程序商家来说营销策划方案显得格外重要,如果想要引入更多流量用 ...
- python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
- 代金券制作小程序秒代金券_微信小程序制作工具与方法
小程序日益火爆,激发了大量商户新的开发需求,租房,购物,出行等场景,都不难见到它的踪影,这也让没有入局小程序的企业开始着急,真分夺秒的着手布局小程序,俗话说,磨刀不误砍柴工,在布局之前,小程序制作流程 ...
- 程序左上角的字_微信内测7.0.7新版本,小程序迎来大改动!
最近几个月来,微信就跟打了鸡血一样不断更新了多个版本上线多个新功能.此前7月末,微信安卓7.0.6带来了将收藏笔记,文件预览等页面设为浮窗的功能,目前最多支持5个文档或笔记设为浮窗.这不,距离微信7. ...
最新文章
- 修改mysql 默认字符集 , 默认引擎
- 有关计算机组装的书,计算机组装实习报告书.doc
- 混合app用百分比还是rem_一次搞懂前端所有CSS长度单位,px、em、rem、rpx、%....
- java的异常抛出throws和throw的简单使用
- onbeforeedit和onbeginedit数据不一致_Redis缓存与数据库产生不一致的问题该如何解决?...
- 如何生成符合高斯分布的数据集
- 用PHP和Python生成短链接服务的字符串ID
- 基于SignalR实现B/S系统对windows服务运行状态的监测
- python 动态规划_DP动态规划(Python实现)
- python中dump用法_python中json庫中的load、loads、dump、dumps的區別與用法
- docker命令每次需要sudo操作解决方案
- 冲突符号_冲突营销关键词连载(二) 冲突
- android 换机 软件 评比,安卓一键换机软件哪个好?手机换机软件排行榜TOP3推荐...
- sony z及泛泰a870 安装optware记录
- Leetcode 120 Triangle 三角形最小路径和
- matlab2018a出现error8怎么办
- Word导入与发送、一键生成PPT文案
- hdfs清理回收站命令(参考)
- MySQL导入百万数据实践
- Android各种大内存脚本对比(app2sd,a2sd,a2sd+,d2sd,CronMod,Mound2SD)
热门文章
- 为什么计算机只有安全模式能进系统吗,电脑可以进安全模式但正常系统为什么进不去...
- 四扫客户接口——接口测试完成文档
- html,css和js
- 计算机初操作员培训大纲,计算机初级培训大纲.doc
- 北京现代2015款途胜中控系统、多媒体系统、车机系统升级教程
- 在天堂与地狱之间——清华浪子梦断中关村
- java无法连接远程服务器数据库,jar远程连接数据库失败
- 三阶魔方大中小魔公式_三阶魔方还原公式
- 【Unity3D】使用 FBX 格式的外部模型 ( 向 Unity 中添加 FBX 模型 | 向 Scene 场景中添加 FBX 模型 | 3D 物体渲染 | 3D 物体材质设置 )
- 国密算法 SM4 对称加密 分组密码 python实现完整代码