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


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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
vue 子组件向父组件传值方法
Feb 26 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 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下将XML转换为数组
2010/01/01 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP函数超时处理方法
2016/02/14 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python可变参数函数用法实例
2015/07/07 Python
python学习 流程控制语句详解
2016/06/01 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python的Lambda函数用法详解
2019/09/03 Python
python生成器推导式用法简单示例
2019/10/08 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
高三自我鉴定怎么写
2013/10/19 职场文书
校三好学生主要事迹
2014/01/11 职场文书
排查整治工作方案
2014/06/09 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
三方股份合作协议书
2014/10/13 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
2019求职信大礼包
2019/05/15 职场文书