• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

环形进度条的组件已经放在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();
},

组件的属性介绍

属性名字 类型 默认值 说明
canvasWidth Number 屏幕宽度的0.4倍 画布宽度
title String “完成率” 标题,设置为""为空
value Number 45 当前的值
maxValue Number 100 最大值
minValue Number 0 最小值
suffix “%” 当前值的后缀名,任何类型
lineWidth Number 10 线条宽度
lineColor String “#393” 线条颜色
valueColor String “#ff9c07” 当前值的颜色
startDegree Number 0 从什么角度开始 0~360之间 (12点方向为0,18点方向为180,0点方向为360)

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序项目学习笔记发布时间:2022-07-18
下一篇:
小程序云数据库查询数据用在其它任意地方(完美解决)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap