小程序实现圆环进度

最新推荐文章于 2025-04-14 12:55:56 发布

原创

最新推荐文章于 2025-04-14 12:55:56 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #wpf #elementui

本文介绍了如何在小程序中实现圆环形的进度条效果，包括在视图层的布局和样式设置，以及在Model层的数据处理。同时，讨论了CSS在创建这种效果中的关键作用。

视图层

      <view class="progress_box">
        <canvas class="progress_bg" canvas-id="cpbg"></canvas>
        <canvas class="progress_bar" canvas-id="cpbar"></canvas>
        <canvas class="progress_line" canvas-id="cpline"></canvas>
        <view class="progress_txt">
          <view class="">
            已完成
          </view>
          <view class="progress_info">{
  
  { progress_txt }}%</view>
        </view>
      </view>

Model层

    drawProgressbg: function () {
      // 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
      var ctx = uni.createCanvasContext("cpbg", this);
      ctx.setLineWidth(12); // 设置圆环的宽度
      ctx.setStrokeStyle("#E9E9E9"); // 设置圆环的颜色
      // ctx.setLineCap('round'); // 设置圆环端点的形状
      ctx.setLineCap("square"); // 设置圆环端点的形状
      ctx.beginPath(); //开始一个新的路径
      ctx.arc(110, 110, 70, 0 * Math.PI, 2 * Math.PI,