uni-app 环形进度条插件需求

在uni-app中实现环形进度条插件，你可以通过自定义组件的方式来完成。以下是一个简单的环形进度条组件的实现示例，包括必要的HTML、CSS和JavaScript代码。

1. 创建组件文件

在components目录下创建一个名为CircularProgressBar.vue的文件。

CircularProgressBar.vue

<template>
  <view class="progress-circle" :style="circleStyle">
    <view class="progress-circle__circle" :style="circleBackgroundStyle"></view>
    <view class="progress-circle__circle" :style="circleForegroundStyle"></view>
    <view class="progress-circle__info">
      <text>{{ percentage.toFixed(0) }}%</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 100
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    backgroundColor: {
      type: String,
      default: '#e0e0e0'
    },
    foregroundColor: {
      type: String,
      default: '#4caf50'
    }
  },
  computed: {
    circleStyle() {
      return {
        width: `${this.size}px`,
        height: `${this.size}px`
      };
    },
    circleBackgroundStyle() {
      return {
        stroke: this.backgroundColor,
        'stroke-width': `${this.strokeWidth}px`,
        'stroke-linecap': 'round',
        transform: `rotate(-90deg)`
      };
    },
    circleForegroundStyle() {
      const radius = (this.size - this.strokeWidth) / 2;
      const circumference = 2 * Math.PI * radius;
      const offset = circumference - (this.progress / 100) * circumference;
      return {
        stroke: this.foregroundColor,
        'stroke-width': `${this.strokeWidth}px`,
        'stroke-linecap': 'round',
        'stroke-dasharray': `${circumference}px ${circumference}px`,
        'stroke-dashoffset': `${offset}px`,
        transform: `rotate(-90deg)`
      };
    },
    percentage() {
      return this.progress;
    }
  }
};
</script>

<style scoped>
.progress-circle {
  position: relative;
  display: inline-block;
}
.progress-circle__circle {
  transform: rotate(calc(var(--p) * 3.6deg));
  transform-origin: center;
  fill: none;
  stroke: currentColor;
}
.progress-circle__info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  font-weight: bold;
}
</style>

2. 使用组件

在你的页面中引入并使用这个组件。

YourPage.vue

<template>
  <view>
    <CircularProgressBar :progress="75" :size="200" :strokeWidth="15" backgroundColor="#e0e0e0" foregroundColor="#ff5722" />
  </view>
</template>

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

export default {
  components: {
    CircularProgressBar
  }
};
</script>

这样，你就可以在uni-app中实现一个简单的环形进度条插件，并可以在页面中通过传递不同的属性来定制进度条的外观。