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


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 相关文章推荐
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
详解原生js实现offset方法
Jun 15 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
原生JS实现无缝轮播图片
Jun 24 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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
使用JS动态显示文本
2017/09/09 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
使用Python对MySQL数据操作
2017/04/06 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
优秀经理获奖感言
2014/03/04 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
村级四风对照检查材料
2014/08/24 职场文书
房产授权委托书范本
2014/09/22 职场文书
交通安全横幅标语
2014/10/07 职场文书
个人求职意向书
2015/05/11 职场文书
赤壁观后感(2)
2015/06/15 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers