展示操作或任务的当前进度,比如上传文件,是一个圆形的进度环。
#内部实现
组件内部通过canvas
实现,有更好的性能和通用性。
#平台差异说明
#基本使用
- 通过
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