详解微信小程序——自定义圆形进度条


Posted in Javascript onDecember 29, 2016

微信小程序 自定义圆形进度条,具体如下:

无图无真相,先上图:

详解微信小程序——自定义圆形进度条

实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条。

代码实现:

JS代码:

Page({ 
 data: {}, 
 onLoad: function (options) { 
  // 页面初始化 options为页面跳转所带来的参数 
 }, 
 onReady: function () { 
 
  // 页面渲染完成 
  var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。 
  cxt_arc.setLineWidth(6); 
  cxt_arc.setStrokeStyle('#d2d2d2'); 
  cxt_arc.setLineCap('round') 
  cxt_arc.beginPath();//开始一个新的路径 
  cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径 
  cxt_arc.stroke();//对当前路径进行描边 
   
  cxt_arc.setLineWidth(6); 
  cxt_arc.setStrokeStyle('#3ea6ff'); 
  cxt_arc.setLineCap('round') 
  cxt_arc.beginPath();//开始一个新的路径 
  cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false); 
  cxt_arc.stroke();//对当前路径进行描边 
 
  cxt_arc.draw(); 
   
 }, 
 onShow: function () { 
  // 页面显示 
 }, 
 onHide: function () { 
  // 页面隐藏 
 }, 
 onUnload: function () { 
  // 页面关闭 
 } 
})

页面布局:

<view class="wrap"> 
 <view class="top"> 
  <canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc"> 
  </canvas> 
 
  <view class="cc">中间</view> 
 
 </view> 
</view>

CSS样式:

.cir{ 
 display: inline-block; 
 margin-top: 20rpx; 
 
} 
 
.top{ 
 text-align: center 
} 
 
.cc{ 
  
 margin-top: -120px; 
  
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
js实现时间日期校验
May 26 Javascript
JS作用域深度解析
Dec 29 #Javascript
javascript中的深复制详解及实例分析
Dec 29 #Javascript
canvas学习之API整理笔记(一)
Dec 29 #Javascript
Javascript Function.prototype.bind详细分析
Dec 29 #Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Python接口测试文件上传实例解析
2020/05/22 Python
法院实习人员自我鉴定
2013/09/26 职场文书
制药工程专业毕业生推荐信
2013/12/24 职场文书
村委会主任先进事迹
2014/01/15 职场文书
理想演讲稿范文
2014/05/21 职场文书
认错检讨书
2014/10/02 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
大学生活感想
2015/08/10 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python