侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 3年前   196

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

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

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

环形进度条效果图

创建步骤

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

结构图:

环形进度条组件的代码

canvas-ring.json

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

canvas-ring.wxml

    {{title}}    {{value}} {{suffix}}  

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

index.js

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

组件的属性介绍

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

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

您可能感兴趣的文章:

  • 微信小程序实现圆形进度条动画
  • 微信小程序自定义音乐进度条的实例代码
  • 微信小程序多音频播放进度条问题
  • 微信小程序画布圆形进度条显示效果
  • 微信小程序之圆形进度条实现思路
  • 微信小程序实现下载进度条的方法
  • 微信小程序实现实时圆形进度条的方法示例
  • 详解微信小程序――自定义圆形进度条
  • 微信小程序实现时间进度条功能


  • 上一条:
    微信小程序实现form表单本地储存数据
    下一条:
    微信小程序身份证验证方法实现详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在go语言中以邮件标题中获取SPF和DMARC,来判断是否为垃圾邮件之垃圾邮件过滤器功能实现(0个评论)
    • 在go语言中使用attr字段标签提取XML属性数据示例(0个评论)
    • 在laravel中介绍一个生成假数据的PHP库:FakerPHP(0个评论)
    • 在laravel框架中对环境配置文件的加载过程步骤浅析(0个评论)
    • Laravel 10.12版本发布(0个评论)
    • 在go语言中如何记录每个HTTP请求到你的Web服务器、日志记录器?(0个评论)
    • 在Go语言中如何查找一个IP地址的网络地址?(0个评论)
    • ELK + Filebeat 搭建日志系统流程步骤(0个评论)
    • 在laravel中以curl的方式请求京东联盟api获取数据流程步骤(0个评论)
    • 在go语言中使用gin框架-中间件gin.BasicAuth()实现账号密码方式认证示例(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客