uniapp自定义进度条库

可以考虑使用uni-ui组件库中的进度条组件，或者自己开发一个自定义的进度条组件。下面是一个简单的自定义进度条组件的示例代码：

1. 在项目的 components 目录下新建 Progress.vue 文件，编写进度条组件的模板、样式和逻辑代码：

<template>
  <div class="progress-wrapper">
    <div class="progress-bar" :style="{ width: barWidth }"></div>
  </div>
</template>

<style>
.progress-wrapper {
  width: 100%;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #007aff;
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
}
</style>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    maxValue: {
      type: Number,
      default: 100,
    },
  },
  computed: {
    barWidth() {
      return `${(this.value / this.maxValue) * 100}%`;
    },
  },
};
</script>

2. 在需要使用进度条的页面中引入该组件，并使用 props 传递进度条的值和最大值：

<template>
  <div class="page">
    <progress :value="progressValue" :max-value="maxValue" />
  </div>
</template>

<script>
import Progress from '@/components/Progress';

export default {
  components: {
    Progress,
  },
  data() {
    return {
      progressValue: 50,
      maxValue: 100,
    };
  },
};
</script>

这样就可以在页面中使用自定义的进度条组件了。你也可以根据需要对进度条的样式和行为进行自定义。