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

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

环形进度条的组件已经放在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上