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


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 相关文章推荐
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
Javascript中神奇的this
Jan 20 Javascript
利用python分析access日志的方法
Oct 26 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
基于vue.js实现购物车
Jan 15 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php smarty的预保留变量总结
2008/12/04 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python版DDOS攻击脚本
2019/06/12 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
python3爬虫中异步协程的用法
2020/07/10 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
卫生系统先进事迹
2014/05/13 职场文书
生日庆典策划方案
2014/06/02 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
简历中自我评价范文
2015/03/11 职场文书
离婚被告答辩状
2015/05/22 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS