小程序学习(12):组件--彩色环形进度条

小程序学习(12):组件–彩色环形进度条

2019年9月26日

在这里插入图片描述

代码片段

代码片段 https://developers.weixin.qq.com/s/UoErDFma7Ebq

主文件

json
"usingComponents": {
  "w-annulus2": "/component/w-annulus2/w-annulus2"
 }
wxml
<!-- 
  参数==
  percentage=>进度条进度,取值范围0~2
  text=>中间文本
  size=>文本字体大小,只需要填写数字,单位rpx
 -->
<view class="page">
  <w-annulus2 percentage='1.2' text='进度1.2' />
</view>
css
.page{
  width: 100%;
  height: 500rpx;
}

组件

wxml
<!--component/w-annulus2/w-annulus2.wxml-->
<view id="cct" class="all">
  <canvas canvas-id='customCanvas' class='canvas' />
  <canvas canvas-id='progressBar' class='canvas' />
  <view class="viewText" style="font-size: {{size}}rpx;">{{text}}</view>
</view>
css
/* component/w-annulus2/w-annulus2.wxss */
.all{
  width: 100%;
  height: 100%;
  position: relative;
  /* border: 1rpx solid red; */
}
.canvas{
  width: 100%;
  height: 100%;
  position: absolute;
}
.viewText{
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
}
js
// component/w-annulus2/w-annulus2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    percentage: { //百分比
      type: Number,
      value: 0.6
    },
    text: {    //中间文本
      type: String,
      value: '完成度···'
    },
    size: {    //文本大小
      type: Number,
      value: 27
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--组件挂载后执行
   */
  ready: function () {
    this.getMySelf();
    this.getText();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 方法--获取组件高度等信息
     * 并画出整体和进度条
     */
    getMySelf() {
      const that = this;
      var query = wx.createSelectorQuery().in(this);
      query.select('#cct').boundingClientRect()
      query.exec(function (res) {
        that.runA(res[0].width, res[0].height); //画背景黑线
        that.runB(res[0].width, res[0].height, that.data.percentage); //画彩色进度
      })
    },
    /**
     * 方法--canvas画图--背景
     * W => 组件宽度
     * Y => 组件高度
     */
    runA(W = 100, Y = 100) {
      var ctx = wx.createCanvasContext('customCanvas', this);
      var R = W < Y ? W : Y;
      ctx.setLineWidth(2);    //设置宽度
      ctx.setStrokeStyle('#666666'); // 设置圆环的颜色
      ctx.setLineCap('round') // 设置圆环端点的形状
      ctx.beginPath();//开始一个新的路径
      ctx.arc(W / 2, Y / 2, R / 3, 0, 2 * Math.PI, false);
      ctx.stroke();//对当前路径进行描边
      ctx.draw();
    },
    /**
     * 方法--canvas画图--加载进度条
     */
    runB(W = 100, Y = 100, J) {
      var pgB = wx.createCanvasContext('progressBar', this);
      //设置颜色
      var cColor = pgB.createLinearGradient(200, 100, 100, 200);
      cColor.addColorStop("0", "#2661DD");
      cColor.addColorStop("0.5", "#40ED94");
      cColor.addColorStop("1.0", "#5956CC");
      var R = W < Y ? W : Y;
      pgB.setLineWidth(6);
      pgB.setLineCap('round');
      var j = 0;
      var timeDraw = setInterval(function () {
        if (j >= J)
          clearInterval(timeDraw);
        j = j + 0.01;
        pgB.setStrokeStyle(cColor);
        pgB.beginPath();
        pgB.arc(W / 2, Y / 2, R / 3, -Math.PI / 2, j * Math.PI - Math.PI / 2, false);
        pgB.stroke();
        pgB.draw();
      }, 35)
    },
    /**
     * 方法--获取文本
     */
    getText() {

    },
  }
})

注释

1.组件中的json没有东西,就没有放,同样,引入也只需要写json和wxml所以别的没有放,代码片段可以直接导入,没有别的多余的
2.这个组件外部包裹的view必须设置大小,要不然可能出现显示在屏幕外面找不到的问题,外部的view没有要求,不一定必须是正方形,我写组件的时候计算过外部高度和宽度,所以只要是写了外部的大小,不管是%、rpx、rem什么的,都是可以居中显示的
3.本来想对传入的文本进行操作的,通过参数修改字体颜色什么的,但是做这个的目的就是学一下环形进度条,突然发现已经做完了,就没有别的修改的欲望了
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值