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


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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
actionscript与javascript的区别
May 25 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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创建桌面快捷方式的实例代码
2014/02/17 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python入门篇之字典
2014/10/17 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python关键字and和or用法实例
2015/05/28 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Django中的文件的上传的几种方式
2018/07/23 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
什么是python的id函数
2020/06/11 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
香港化妆品经销商:我的公主
2016/08/05 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
十八届三中全会学习方案
2014/02/16 职场文书
大学毕业寄语大全
2014/04/10 职场文书
商业项目策划方案
2014/06/05 职场文书
朋友聚会开场白
2015/06/01 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js