微信小程序 实现进度条效果

一、背景

微信小程序中的原生进度条组件（Progress）只能显示一种进度状态，但有时我们需要展示多种状态，比如预算已使用与本次申请的进度。为了实现这一功能，我采用了 canvas 来绘制多种状态的进度条。记录下小程序原生组件 Progress 的单状态使用，以及通过 canvas 实现多状态进度条的方法。

二、小程序Progress组件

官方文档指引👉👉：progress | 微信开放文档

2.1、使用小程序原生组件 Progress 创建一个可滚动的进度条

在页面挂载后，启动定时器，进度条从0开始，每秒增加1，直到宽度达到100，然后停止定时器。

2.2、代码实现

<template>
  <view class="progress">
    <progress :percent="deflautWidth" activeColor="#52CC52" backgroundColor="#EBEBEB" stroke-width="10" show-info />
  </view>
</template>

<script>
  export default{
    data(){
      return{
        deflautWidth:0,
        timer:null
      }
    },
    mounted(){
      let index = 0
      this.timer = setInterval(()=>{
        index+=1
        this.deflautWidth = index
        if(this.deflautWidth==100){
          clearInterval(this.timer)
        }
      },1000)
    },
  }
</script>
<style scoped>
.progress{
  padding:20rpx;
  }
</style>

属性说明：

percent：百分比       activeColor：已选择的进度条的颜色   

backgroundColor：未选择的进度条的颜色       stroke-width：进度条线的宽度

show-info：在进度条右侧显示百分比

详细属性说明可查看官方文档👉👉：progress | 微信开放文档

2.3、效果展示

三、canvas 实现多状态进度条

3.1、需求

微信小程序中以进度条的效果展示预算中已使用与本次申请的状态，即实现多状态进度条效果；在点击进度条时显示总预算/已使用/本次申请的数据

3.2、代码实现

<template>
<view class="progress-wrapper">
  <view class="moreData" v-if="show">
    <img src="/static/delete.png" alt="" @click="show = false">
    <view class="budgetList" >
    <view>年度总预算：¥10000</view>
    <view>已使用：¥2000,20%</view>
    <view>本次申请：¥8000,80%</view>
  </view>
  </view>
  <canvas canvas-id="progressCanvas" style="width: 100%; height: 20px;" 
     @tap="showDetail"></canvas>
  <view class="budgetPage">
    <view class="budgetStatus" :style="{color:'#52CC52'}">预算状态：正常</view>
   <view class="ratio">
    <view class="cglm">(<i :style="{backgroundColor:'#52CC52'}"></i><label>已使用</label> 
    </view>
    <view class="cglm"><i :style="{backgroundColor:'#555555'}"></i><label>本次申请) 
    </label></view>
   </view>
  </view>
</view>
</template>

<script>
  export default{
    data(){
      return{
        show:false
      }
    },
    onReady: function () {
    this.drawProgress(0.2, 0.8); // 在页面准备好后绘制进度条
  },
   methods:{
    drawProgress: function (percent1, percent2) {
    const ctx = wx.createCanvasContext('progressCanvas');
    const width = 500; // 进度条总宽度
    const height = 15; // 进度条高度

    // 绘制灰色背景
    ctx.setFillStyle('#EBEBEB');
	ctx.fillRect(0, 0, width, height);

    // 绘制第一种颜色的进度
    ctx.setFillStyle('#52CC52');
    ctx.fillRect(0, 0, width * percent1, height);

    // 绘制第二种颜色的进度
    ctx.setFillStyle('#555555');
    ctx.fillRect(width * percent1, 0, width * percent2, height);

    ctx.draw();
   },
    showDetail(){
      this.show=!this.show;
    }
   }
  }
</script>

<style lang='scss' scoped>
.progress-wrapper{
  margin-top: 200rpx;
  position: relative;
}
.moreData{
  width: 100%;
  // height: 150rpx;
  background-color:#17CEA7;
  color: white;
  font-size: 24rpx;
  position: absolute; /* 使用 absolute 定位 */
  top:-110rpx;
  left: 0;
  img{
    color: #FFFEFE;
    width: 25rpx;
    height: 25rpx;
    position: absolute;
    top: 10rpx;
    right: 10rpx;
  }
  .budgetList{
    display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
  }
}
.budgetPage{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10rpx;
  .budgetStatus{
    font-size: 26rpx;
    color: #333333;
  }
  .ratio{
     display: flex;
      .cglm {
      display: flex;
      align-items: center;
      i {
        width: 20rpx;
        height: 20rpx;
        border-radius: 100%;
        margin: 0 10rpx;
      }

      label {
        max-width: 30vw;
        font-size: 10pt;
        font-weight: bold;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}


</style>

3.3、效果展示

最后，👏👏 😀😀😀 👍👍