uni-app 小程序 app 圆环进度条

在 uni-app 中实现一个圆环进度条，你可以使用 Canvas 来进行绘制。以下是一个示例代码，展示如何在 uni-app 小程序中创建一个圆环进度条组件。

1. 创建自定义组件

首先，在你的 components 文件夹中创建一个名为 CircleProgress.vue 的文件。

<template>
  <view class="container">
    <canvas canvas-id="circleCanvas" style="width: 100%; height: 100%;" />
  </view>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    bgColor: {
      type: String,
      default: '#e0e0e0'
    },
    strokeColor: {
      type: String,
      default: '#3498db'
    }
  },
  mounted() {
    this.drawCircle();
  },
  watch: {
    percent() {
      this.drawCircle();
    }
  },
  methods: {
    drawCircle() {
      const ctx = uni.createCanvasContext('circleCanvas', this);
      const radius = (this.width - this.strokeWidth) / 2;
      const centerX = this.width / 2;
      const centerY = this.height / 2;

      ctx.clearRect(0, 0, this.width, this.height);
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
      ctx.setFillStyle(this.bgColor);
      ctx.fill();

      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + (this.percent / 100) * 2 * Math.PI, false);
      ctx.setStrokeStyle(this.strokeColor);
      ctx.setLineWidth(this.strokeWidth);
      ctx.stroke();

      ctx.draw();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2. 使用自定义组件

在你的页面中使用这个组件，例如在 pages/index/index.vue 中：

<template>
  <view>
    <CircleProgress :percent="progress" />
    <button @click="increaseProgress">增加进度</button>
  </view>
</template>

<script>
import CircleProgress from '@/components/CircleProgress.vue';

export default {
  components: {
    CircleProgress
  },
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    increaseProgress() {
      if (this.progress < 100) {
        this.progress += 10;
      }
    }
  }
};
</script>

这个示例展示了如何创建一个圆环进度条组件，并通过按钮点击事件来增加进度。你可以根据需要调整组件的样式和属性。