uni-app 求一个孤行进度条

在uni-app中实现一个孤行进度条（环形进度条），你可以使用Canvas或者引入一些现成的UI库如uView UI来实现。这里我将提供一个使用Canvas实现环形进度条的简单示例代码。

首先，确保你的uni-app项目已经创建好，并且你熟悉基本的页面结构和组件使用。

1. 创建页面组件

在你的pages目录下创建一个新的页面，比如progressCircle.vue。

2. 编写Canvas代码

在progressCircle.vue中，编写以下代码：

<template>
  <view class="container">
    <canvas canvas-id="progressCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 75 // 进度值，0-100
    };
  },
  mounted() {
    this.drawProgressCircle();
  },
  methods: {
    drawProgressCircle() {
      const ctx = uni.createCanvasContext('progressCanvas');
      const width = 300;
      const height = 300;
      const radius = width / 2 - 10; // 圆环半径
      const startAngle = -Math.PI / 2; // 起始角度
      const sweepAngle = (this.progress / 100) * 2 * Math.PI; // 扫过的角度

      // 画背景圆环
      ctx.setStrokeStyle('#e0e0e0');
      ctx.setLineWidth(10);
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, 0, 2 * Math.PI);
      ctx.stroke();

      // 画进度圆环
      ctx.setStrokeStyle('#4caf50');
      ctx.setLineWidth(10);
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, startAngle, startAngle + sweepAngle);
      ctx.stroke();

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

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

3. 运行项目

保存上述代码后，运行你的uni-app项目，你应该会看到一个带有环形进度条的页面。你可以通过修改data中的progress值来观察进度条的变化。

注意

• 本示例使用Canvas绘制环形进度条，适合对性能和自定义需求较高的场景。
• 如果你需要更丰富的UI组件，可以考虑引入uView UI或其他UI库，这些库通常提供了更易于使用和扩展的进度条组件。
• 确保Canvas的canvas-id在页面中唯一，以避免绘图冲突。