首页 > 编程语言 >小程序环形进度条(基于l-circularProgress)

小程序环形进度条(基于l-circularProgress)

时间:2023-08-09 10:47:48浏览次数:59  
标签:circularProgress center 进度条 text 环形 height content progress font

组件预览:

 组件代码:

<view class="progress-wrap">
				<l-circularProgress :box-width="progressBoxWidth" :box-height="progressBoxWidth" :fontShow="false"
					progressColor="#fff5de" :lineWidth="circleProgresaBorderWidth" fontColor="#fff3e2"
					gradualColor="#cfa365" bg-color="#373c43" :percent="updatePercent">
					<view class="progress-slot-text-block">
						<view class="progress-text-wrap">
							<text class="progress-num">{{ updatePercent || 0 }}</text>
							<text class="progress-unit">%</text>
						</view>
					</view>
				</l-circularProgress>
				<view class="progress-tips">{{ progressTips }}</view>
			</view>

  

.progress-wrap {
		width: 750rpx;
		height: 468rpx;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.progress-slot-text-block {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		.progress-text-wrap {
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			display: inline-flex;
			align-items: baseline;
			justify-content: center;
		}

		.progress-num {
			font-size: 80rpx;
			color: #fff3e2;
			font-weight: 500;
			text-shadow: 0rpx 4rpx 8rpx #ffad3266;
			margin-right: 10rpx;
		}

		.progress-unit {
			color: #fff3e2;
			font-size: 36rpx;
			line-height: 80rpx;
		}
	}

	::v-deep .circular-container {
		transform: translateX(calc(50vw - 50%));
	}

  

标签:circularProgress,center,进度条,text,环形,height,content,progress,font
From: https://www.cnblogs.com/abby-lrwei/p/17616213.html

相关文章

  • 控制台打印进度条
    控制台打印进度条,实时展示任务进度。话不多说,直接上代码,这是一个编写好的进度条打印工具类,拿来即用~1.工具类importjava.util.Arrays;/***<h5>描述:打印进度条</h5>*/publicclassToolProgressBar{ //进度条展示符号,可自定义 privatefinalstaticcharBAR_C......
  • 代码随想录第四天|力扣24.两两交换链表节点、力扣19.删除链表的倒数第N个结点、力扣面
    两两交换链表中的节点(力扣24.)dummyhead.next=head;cur=dummyhead;while(cur.next!=null&&cur.next.next!=null)temp=cur.next;temp1=cur.next.next.next;cur.next=cur.next.next;cur.next.next=temp;temp.next=temp1;cur=cur.next.next;returndummyhead.n......
  • 代码随想录算法训练营第四天| LeetCode 24. 两两交换链表中的节点 19.删除链表的倒
    24.两两交换链表中的节点     卡哥建议:用虚拟头结点,这样会方便很多。 本题链表操作就比较复杂了,建议大家先看视频,视频里我讲解了注意事项,为什么需要temp保存临时节点。   题目链接/文章讲解/视频讲解:https://programmercarl.com/0024.%E4%B8%A4%E4%B8%A4%E4%BA%......
  • 力扣---142. 环形链表 II
    给定一个链表的头节点 head ,返回链表开始入环的第一个节点。 如果链表无环,则返回 null。如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置(索引从0开始)。如果......
  • 力扣---141. 环形链表
    给你一个链表的头节点 head ,判断链表中是否有环。如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置(索引从0开始)。注意:pos 不作为参数进行传递 。仅仅是为了标......
  • Android VideoView播放进度条
    AndroidVideoView播放进度条实现流程为了实现AndroidVideoView的播放进度条,我们需要按照以下步骤进行操作:步骤操作1在布局文件中添加VideoView和SeekBar控件2在Activity中找到并初始化VideoView和SeekBar控件3设置VideoView的路径和准备监听4设置SeekBar......
  • 918. 环形子数组的最大和 (Medium)
    问题描述918.环形子数组的最大和(Medium)给定一个长度为n的环形整数数组nums,返回nums的非空子数组的最大可能和。环形数组意味着数组的末端将会与开头相连呈环状。形式上,nums[i]的下一个元素是nums[(i+1)%n],nums[i]的前一个元素是nums[(i-1+n)%n]......
  • Python之Rich库-打印彩色字体,表单,进度条与状态动画
      https://rich.readthedocs.io/en/latest/introduction.html Introduction¶RichisaPythonlibraryforwritingrichtext(withcolorandstyle)totheterminal,andfordisplayingadvancedcontentsuchastables,markdown,andsyntaxhighlightedcode.U......
  • 2023.7.20 环形子数组的最大和
    求子数组最大和可以用dp解决,所以环形子数组也可以用dp解决。最简单的就是破环成链,将原数组再复制一遍然后接到尾端,然后对每个起点做一次求子数组最大和dp。但是由于n的范围较大,这样做的时间复杂度是\(n^2\),会超时。所以必须想办法优化。根据这张图,我们可以把子数组分为二种情......
  • c++环形队列的简单实现
    环形队列可以通过维护count来间接维护tail和head指针的关系,简化程序,避免了直接使用tail和head指针,读写时head与tail回环时的比较处理,判断队列元素长度时的复杂处理,如下为不基于count而是直接使用head和tail指针比较的环形队列的实现,逻辑较为复杂uint32_tCAudioRingBuffer::Da......