uniapp中实现圆形进度条的方式有哪些？

news2024/10/7 6:47:02

前言

在uniapp开发小程序或者apk时，页面需要用到一个圆形进度条（带文字和百分比的），自己也自定义过一个,但是有一点小问题，咱先展示如何引入插件市场的在介绍自定义的！一共四种，但是你需要考虑自己的兼容性！

正文

一、插件市场

1.进入DCloud插件市场：DCloud 插件市场

2.找到了一款和自己需求符合的，兼容性也是比较好的，做uniapp项目是需要考虑和测试兼容性的，只有真机上能看的出来，模拟器不一定看的出来！！！圆形进度条

3.下载插件并导入HBuilderX

4.点击之后需要登录账号密码，然后导入到你uniapp中的uni_modules文件夹下，这个文件夹下面不需要引入页面在引入了。

5.页面中使用组件：

<l-circularProgress :fontShow="false" bgColor="#f2f2f2" :lineWidth="10" boxWidth="90" boxHeight="90" progressColor="#7ef22e"
	  :percent="80" style="position: relative;">
	<view class="centerTxtSpecial" style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);">
	  <view class="numSpecial">80%</view>
	  <view class="txtSpecial">性能</view>
	</view>
</l-circularProgress>

css代码

.centerTxtSpecial {
	position: absolute;
	top: 50%;
	left: 47%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.numSpecial {
	font-size: 30rpx;
	font-family: Arial;
	/* font-weight: bold; */
	color: #008000;
}

.txtSpecial {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999;
	margin-top: 8rpx;
}

6、效果如下

二、自定义组件：

1.html代码

<div v-for="(item,index) in dataList" :key="index" class="setBorder" @click="handledetail(item)">
    /**主要内容*/
    <view class="circlecontent">
	    <view class="circleprogress">
		    <view class="progresstext">
			    {{item.percent}}%
			    <text style="font-size: 12px; width: 100%;">
				    性能
			    </text>
		    </view>
		    <view class="wrapper">
			    <view class="leftprogress" :style="{ transform: 'rotate('+(item.percent * 3.6 <= 180 ? -45 : -45+(item.percent * 3.6-180))+'deg)'}"></view>
		    </view>
		    <view class="wrapper">
			    <view class="rightprogress" :style="{ transform: 'rotate('+(item.percent * 3.6 <= 180 ? 45 + item.percent * 3.6 : 45+180)+'deg)'}"></view>
		    </view>
	    </view>
    </view>
</div>

2.js代码

leftprogress: 'rotate(-45deg)',
rightprogress: 'rotate(45deg)',
dataList: []

3.css代码


.circlecontent {
	width: 80px;
	display: flex;
	justify-content: center;
	flex-flow: wrap;
	align-items: center;
	border-radius: 50%;
	text-align: center;
	height: 80px;
	position: relative;
}

.circleprogress {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
}

.circleprogress .progresstext {
	position: absolute;
	font-size: 12px;
	width: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #008000;
	flex-wrap: wrap;
	top: 45%;
	left: 15%;
	transform: translateY(-50%);
}

.circleprogress .wrapper {
	width: 80px;
	height: 80px;
	overflow: hidden;
}

.circleprogress .leftprogress,
.rightprogress {
	width: 70px;
	height: 70px;
	border: 10px solid #eee;
	border-bottom: 10px solid #7ef22e;
	border-radius: 50%;
}

.circleprogress .leftprogress {
	border-right: 10px solid #7ef22e;
}

.circleprogress .rightprogress {
	border-left: 10px solid #7ef22e;
	margin-left: -40px;
}

4.效果：

这个兼容性都没问题，但是有个缺角！

三、第三方自定义组件：

uniapp圆环进度条组件_环形进度条组件-CSDN博客

问题：canvas层级高，目前覆盖文字信息没有展示！只有环形展示出来了！

四、uview官方组件

1.html

<u-circle-progress active-color="#7ef22e" :percent="item.percent">
	<view class="centerTxtSpecial">
		<div class="numSpecial">{{item.percent}}%</div>
		<text class='txtSpecial'>性能</text>
	</view>
</u-circle-progress>

2.js引入组件

看你自己文件位置，不能完全copy

import uCircleProgressVue from "../../../components/owner/u-circle-progress.vue";
export default {
    components: {
        'u-circle-progress': uCircleProgressVue
    }
}

3.这个官方的在安卓手机上apk无法正常显示，小程序都是ok的！