微信小程序实现进度条效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序实现进度条效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、背景

微信小程序中的原生进度条组件（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>