更新记录

1.0.1（2026-07-28） 下载此版本

• 修复封装为 uni_modules 后圆环不显示的问题
• 移除 #ifdef 条件编译，H5 / 小程序统一使用 CSS 圆环

平台兼容性

uni-app(4.02)

uni-app x(4.0)

nny-charge-ring 充电圆形进度条

充电场景圆形进度条组件，可实时跟随进度更新。

• H5 / 微信小程序：统一 CSS 双半圆方案（兼容性更好）
• 支持自定义颜色、尺寸、文案
• 支持默认插槽自定义中心内容
• easycom 自动引入，下载后即可使用

平台兼容

安装

1. 通过插件市场导入到项目，或将 uni_modules/nny-charge-ring 复制到你的项目
2. 无需手动 import（uni_modules easycom 会自动注册）

基本用法

<template>
  <view>
    <nny-charge-ring :progress="progress" :charging="isCharging" />
    <button @tap="start">开始充电</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      isCharging: false,
      timer: null
    }
  },
  methods: {
    start() {
      if (this.isCharging) return
      this.progress = 0
      this.isCharging = true
      this.timer = setInterval(() => {
        if (this.progress >= 99) {
          this.progress = 100
          this.isCharging = false
          clearInterval(this.timer)
          return
        }
        this.progress += 1
      }, 80)
    }
  }
}
</script>

自定义颜色 / 尺寸

<nny-charge-ring
  :progress="60"
  :charging="true"
  :size="400"
  active-color="#2563EB"
  full-color="#16A34A"
  text-color="#0F172A"
/>

自定义中心内容（插槽）

<nny-charge-ring :progress="progress" :charging="true">
  <view class="custom">
    <text>{{ progress }}%</text>
    <text>自定义内容</text>
  </view>
</nny-charge-ring>

Props

Slot

注意事项

1. 进度由外部传入并控制，组件本身不负责计时逻辑，便于接入真实电量数据
2. 微信小程序请使用真机或开发者工具重新编译预览
3. 自定义图标请放在项目可访问路径，并通过 chargingIcon / fullIcon 传入

示例项目

本仓库 pages/index/index 为完整演示页，可直接运行查看效果。