uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法

简介: uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法

展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。

#内部实现

组件内部通过canvas实现,有更好的性能和通用性。

#平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序

#基本使用

  • 通过percent设置当前的进度值,该值区间为0-100
  • 通过active-color设置圆环的颜色,也可以直接设置type主题颜色,使用预置值
  • 通过默认slot传入内容,将会显示在圆环的内部
<template>
  <u-circle-progress active-color="#2979ff" :percent="80">
    <view class="u-progress-content">
      <view class="u-progress-dot"></view>
      <text class='u-progress-info'>查找中</text>
    </view>
  </u-circle-progress>
</template>
 
<style lang="scss" scoped>
  .u-progress-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .u-progress-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background-color: #fb9126;
  }
  
  .u-progress-info {
    font-size: 28rpx;
    padding-left: 16rpx;
    letter-spacing: 2rpx
  }
</style>

#设置圆环的动画时间

通过duration设置圆环从0递增到100%(也即一圆周)所需的时间,如需动态修改进度值时会用到,比如用户进行某一个操作之后, 需要把进度值从30%改为80%,这里增加了50%(80% - 30% =50%),也即半个圆周,所需时间为duration的一半,因为duration值为一个圆周的时间。

<u-circle-progress type="primary" :percent="30" duration="2000"></u-circle-progress>

#API

#Props

参数 说明 类型 默认值 可选值
percent 圆环进度百分比值,为数值类型,0-100 String | Number - -
inactive-color 圆环的底色,默认为灰色(该值无法动态变更) String #ececec -
active-color 圆环激活部分的颜色(该值无法动态变更) String #19be6b -
width 整个圆环组件的宽度,高度默认等于宽度值,单位rpx String | Number 200 -
border-width 圆环的边框宽度,单位rpx String | Number 14 -
duration 整个圆环执行一圈的时间,单位ms String | Number 1500 -
type 如设置,active-color值将会失效 String - success / primary / error / info / warning
bg-color 整个组件背景颜色,默认为白色 String #ffffff -


相关文章
|
1月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
79 10
|
1月前
|
数据可视化 大数据 API
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
低代码可视化开发-uniapp新闻跑马灯组件-代码生成器
95 2
|
1月前
|
存储 API 数据库
uniapp APP自动更新组件
uniapp APP自动更新组件
70 1
|
29天前
|
移动开发 编解码 数据可视化
低代码可视化-uniapp SliderRange区间组件-代码生成器
SliderRange区间组件是一种用户界面元素,允许用户通过拖动滑块选择数值范围。组件支持微信小程序、H5和App,具有高度可定制性、响应式设计和多种事件处理功能。适用于价格筛选、音量调节等场景。代码实现包括滑动区域、滑块、事件处理等部分,支持可视化配置步长、颜色等属性。使用时需注意选择合适步长、提供清晰标签和考虑无障碍设计。
37 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
129 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
63 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
84 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
116 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
116 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
下一篇
无影云桌面