返回介绍

开发指南

组件

JS

模板

CircleProgress 圆形进度条

发布于 2021-04-03 05:35:24 字数 2677 浏览 1089 评论 0 收藏 0

CircleProgress 圆形进度条 内部实现

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

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序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-100String | Number--
inactive-color圆环的底色,默认为灰色(该值无法动态变更)String#ececec-
active-color圆环激活部分的颜色(该值无法动态变更)String#19be6b-
width整个圆环组件的宽度,高度默认等于宽度值,单位rpxString | Number200-
border-width圆环的边框宽度,单位rpxString | Number14-
duration整个圆环执行一圈的时间,单位msString | Number1500-
type如设置,active-color值将会失效String-success / primary / error / info / warning
bg-color整个组件背景颜色,默认为白色String#ffffff-

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文