DDR爱好者之家 Design By 杰米
本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下
微信小程序自定义组件官方教程
环形进度条的组件已经放在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"> {{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上
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年10月30日
2024年10月30日
- 5.2版本恰斯卡专属武器介绍,版本新信息
- 瓶子解说 王者荣耀女娲视频教学
- 新版回忆礼册系统详解!魔盒获取速度加快
- 黄翊.1989-冬季等到夏季【新艺宝】【WAV+CUE】
- 群星.1998-百代情歌竞技长女子组【EMI百代】【WAV+CUE】
- 巫奇.1995-犯错【滚石】【WAV+CUE】
- 《COD21》本周即将上线丧尸模式与“核弹小镇”地图
- 《龙腾世纪:影障守护者》IGN 9分:重振系列荣光!
- 《怪物猎人:荒野》玩家评分4.9 支持画面或性能模式
- 七日世界影日洞穴据点神秘宝箱在哪 影日洞穴据点神秘宝箱收集攻略
- 光遇姆明季先祖在哪里 姆明季先祖位置一览
- 原神5.4卡池爆料角色 5.4卡池预测
- 炉石传说亡灵流最终阵容推荐 酒馆战棋亡灵流最终阵容图文一览
- 炉石传说海盗流最终阵容推荐 酒馆战棋海盗流最终阵容图文一览
- 炉石传说元素流最终阵容推荐 酒馆战棋元素流最终阵容图文一览