uni-app 有偿制作一个环形进度插件

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 有偿制作一个环形进度插件

6 回复

苹果原生开发实现过该效果。如果需要，我这边可以尝试下


想用什么实现？JS吗？

uniapp、uniappx插件

上传了一个 iOS原生实现的效果视频，可以看一下，清晰度不够，阴影显示不明显(https://v.youku.com/v_show/id_XNjQxMTgxOTQzNg==.html)

uniappx 类似功能（安卓、iOS端）进度条插件已基本完成，需要的联系我，uniapp版本的理论上也可以 https://v.youku.com/v_show/id_XNjQxMjMyMDE2NA==.html

当然，我可以为你提供一个基本的环形进度插件示例。以下是一个简单的uni-app环形进度条插件的实现代码。这个示例将展示如何使用Canvas绘制一个环形进度条。

1. 插件目录结构

首先，我们创建一个目录结构来存放我们的插件文件：

components/
  ├── CircularProgressBar.vue

2. 创建CircularProgressBar.vue

在CircularProgressBar.vue文件中，编写以下代码：

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

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    radius: {
      type: Number,
      default: 50
    },
    bgColor: {
      type: String,
      default: '#e0e0e0'
    },
    fgColor: {
      type: String,
      default: '#3498db'
    }Circle
  },
  mounted() {
    this.draw();
  },
  watch: {
    progress() {
      this.drawCircle();
    }
  },
  methods: {
    drawCircle() {
      const ctx = uni.createCanvasContext('circularProgress');
      const { radius, strokeWidth, bgColor, fgColor, progress } = this;

      // Draw background circle
      ctx.setStrokeStyle(bgColor);
      ctx.setLineWidth(strokeWidth);
      ctx.beginPath();
      ctx.arc(radius + strokeWidth / 2, radius + strokeWidth / 2, radius, 0, Math.PI * 2);
      ctx.stroke();

      // Draw progress circle
      ctx.setStrokeStyle(fgColor);
      ctx.setLineWidth(strokeWidth);
      ctx.beginPath();
      ctx.arc(radius + strokeWidth / 2, radius + strokeWidth / 2, radius, -Math.PI / 2, (progress / 100) * Math.PI * 2 - Math.PI / 2);
      ctx.stroke();

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

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

3. 使用插件

在你的页面中使用这个组件：

<template>
  <view>
    <CircularProgressBar :progress="progress" />
    <button @click="increaseProgress">Increase Progress</button>
  </view>
</template>

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

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

这样，你就创建了一个简单的环形进度条插件，并可以在你的uni-app项目中使用它。通过点击按钮，你可以看到进度条的进度在变化。如果需要更复杂的功能，可以在此基础上进行扩展。

回到顶部