微信小程序自定义组件实现环形进度条


Posted in Javascript onNovember 17, 2020

本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下

微信小程序自定义组件官方教程

环形进度条的组件已经放在github上

环形进度条效果图

微信小程序自定义组件实现环形进度条

创建步骤

1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。
2、创建名为canvas-ring的文件夹,用来放环形进度条自定义组件。
3、鼠标指着canvas-ring的文件夹 鼠标右键 “新建 Component” 取名canvas-ring。

结构图:

微信小程序自定义组件实现环形进度条

环形进度条组件的代码

canvas-ring.json

{
 "component": true, //这一定要写成true
 "usingComponents": {} //可以引入其他自定义组件
}

canvas-ring.wxml

<canvas style="width:{{canvasWidth}}px;height:{{canvasWidth}}px;" canvas-id="circleBar">
 <cover-view class="circle-bar-wrap" style="height:{{canvasWidth}}px;">
 <cover-view class="font">
 {{title}}
 </cover-view>
 <cover-view class="val" style="color: {{valueColor}}; margin-top:{{isMarginTop?'20':'0'}}rpx">
 {{value}} {{suffix}}
 </cover-view>
 </cover-view>
</canvas>
<slot></slot>

canvas-ring.wxss

.circle-bar-wrap{
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 box-sizing: border-box;
 padding: 0 20%;
}
.circle-bar-wrap .font{
 max-height: 62rpx;
 font-size: 26rpx;
 overflow:hidden;
 text-overflow:ellipsis;
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;
 white-space: normal;
}
.circle-bar-wrap .val{
 margin-top: 20rpx;
 font-size: 50rpx;
 height: 65rpx;
}

canvas-ring.js

var windWidth = wx.getSystemInfoSync().windowWidth;
Component({
 options: {
 multipleSlots: true // 在组件定义时的选项中启用多slot支持
 },
 /**
 * 组件的属性列表
 */
 properties: {
 //画布的宽度 默认占屏幕宽度的0.4倍
 canvasWidth: {
 type: Number,
 value: windWidth * 0.4
 },
 //线条宽度 默认10
 lineWidth: {
 type: Number,
 value: 10
 },
 //线条颜色 默认"#393"
 lineColor: {
 type: String,
 value: "#393"
 },
 //标题 默认“完成率”
 title: {
 type: String,
 value: "完成率"
 },
 //当前的值 默认45
 value: {
 type: Number,
 value: 45
 },
 //值的颜色 默认"#ff9c07"
 valueColor:{
 type: String,
 value: "#ff9c07"
 },
 //最大值 默认100
 maxValue: {
 type: Number,
 value: 100
 },
 //最小值 默认0
 minValue: {
 type: Number,
 value: 0
 },
 //当前值的后缀名
 suffix: {
 type: null,
 value: "%"
 },
 //从什么角度开始 0~360之间 (12点方向为0,18点方向为180,0点方向为360)
 startDegree: {
 type: Number,
 value: 0
 }

 },

 /**
 * 组件的初始数据
 */
 data: {
 canvasWidth: windWidth * 0.4,
 isMarginTop: true
 },

 /**
 * 组件的方法列表
 */
 methods: {
 showCanvasRing() {
 //去掉首位空格后如果标题为空,那么当前值的区域就没有margin-top值
 if (this.data.title.replace(/(^\s*)|(\s*$)/g, "").length == 0) {
 this.setData({
 isMarginTop: false
 })
 }
 //作画

 var ctx = wx.createCanvasContext("circleBar", this); //canvas组建封装,需要后加个this
 var circle_r = this.data.canvasWidth / 2; //画布的一半,用来找中心点和半径
 var startDegree = this.data.startDegree; //从什么角度开始
 var maxValue = this.data.maxValue; //最大值
 var minValue = this.data.minValue; //最小值
 var value = this.data.value; //当前的值
 var lineColor = this.data.lineColor; //线条颜色
 var lineWidth = this.data.lineWidth; //线条宽度
 var percent = 360 * ((value - minValue) / (maxValue - minValue)); //计算结果
 //定义起始点
 ctx.translate(circle_r, circle_r);
 //灰色圆弧
 ctx.beginPath();
 ctx.setStrokeStyle("#ebebeb");
 ctx.setLineWidth(lineWidth);
 ctx.arc(0, 0, circle_r - 10, 0, 2 * Math.PI, true);
 ctx.stroke();
 ctx.closePath();
 //有色彩的圆弧
 ctx.beginPath();
 ctx.setStrokeStyle(lineColor);
 ctx.setLineWidth(lineWidth);
 ctx.arc(0, 0, circle_r - 10, startDegree * Math.PI / 180 - 0.5 * Math.PI, percent * Math.PI / 180 + startDegree * Math.PI / 180 - 0.5 * Math.PI, false);
 ctx.stroke();
 ctx.closePath();
 ctx.draw();
 }
 }
})

使用环形进度条组件

index.json

{
 "usingComponents": {
 "canvas-ring": "/components/canvas-ring/canvas-ring"
 }
}

index.wxml

<canvas-ring id="canvasRing" value="{{c_val}}"></canvas-ring>

index.js

onReady: function() {
 var that = this;
 that.canvasRing = that.selectComponent("#canvasRing");
 that.canvasRing.showCanvasRing();
},

组件的属性介绍

微信小程序自定义组件实现环形进度条

环形进度条的组件已经放在github上

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 #Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 #Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 #Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 #Javascript
微信小程序实现form表单本地储存数据
Jun 27 #Javascript
ES6 class的应用实例分析
Jun 27 #Javascript
You might like
PHP中路径问题的解决方案
2006/10/09 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
php数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery功能函数详解
2015/02/01 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python计算回文数的方法
2015/03/11 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
办公室员工岗位工作职责
2014/03/10 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
清明节寄语2015
2015/03/23 职场文书
初级职称评定工作总结
2015/08/13 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
把77A收信机改造成收音机
2022/04/05 无线电