uniapp的progress进度条组件添加文字

最新推荐文章于 2025-09-14 16:49:11 发布

原创最新推荐文章于 2025-09-14 16:49:11 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了三种在uniapp中添加进度条组件文字的方法，适用于H5项目及原生app项目，详细阐述了各自的操作步骤和注意事项。

在这里插入图片描述
第一种方法（适用于H5项目）

<template>
	 <view class="touristPage">
		 <!-- 来源区域统计 -->
			 <view class="content">
				 <view class="progressBox" ref="progressBox">
					 <view class="progressItem" v-for="(item,index) in progressBox" :key="index">
						 <view>{{item.province}}</view>
						 <progress class="progress"  :percent="item.percent" :activeColor="item.activeColor" active stroke-width="19" backgroundColor="none"/>
						 <view>{{item.ratio}}%</view>
					 </view>
				 </view>
			 </view>
	 </view>
</template>

<script>
	export default{
		data(){
			return{
				progressBox:[{province:'山西省',percent:45.09*2,activeColor:"#00A4E0",ratio:'45.09',number:'10080'},
				             {province:'浙江省',percent:36*2,activeColor:"#05E3E5",ratio:'36',number:'10081'},
				             {province:'江苏省',percent:20*2,activeColor:"#FFDB39",ratio:'20',number:'10082'},
							 {province:'内蒙古',percent:30*2,activeColor:"#FF9A78",ratio:'30',number:'10083'},
							 {province:'陕西省',percent:24*2,activeColor:"#F155B1",ratio:'24',number:'10086'}]
			}
		},
		mounted() {
			// 进度条写文字
			const list = Array.from(this.$refs.progressBox.$el.getElementsByClassName('uni-progress-inner-bar'));
			list.forEach((item,index)=>{
				// 创建新元素节点<span>标签
				let spans = document.createElement('span');
				// 添加样式类名
				spans.classList.add("progressBoxItem");
				// 将元素插入到父级内
				item.appendChild(spans);
				// 输出数据
				spans.innerHTML = this.progressBox[index].number;
			})
		   }
		}
</script>

<style scoped>
page{
	width: 100%;
	background: #F6F6F6;
	font-family: Microsoft YaHei;
}
.touristPage{
	padding:50upx 24upx;
	padding-top: 0upx;
}
.content{
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0upx 2upx 9upx 0upx rgba(0, 0, 0, 0.1);
	border-radius: 20upx;
}
.progress{
	width: 472upx;
	height: 38upx;
	border-radius: 19upx;
	margin:0upx 20upx 0upx 20upx;
}
.progress /deep/ .uni-progress-bar .uni-progress-inner-bar{
	border-radius: 19upx;
	position: relative;
}
.progressItem{
	font-size: 24upx;
	font-weight: bold;
	color: #0F0F10;
	display: flex;
}
.progressItem:not(:last-child){
	margin-bottom: 16upx;
}
.progressBox{
	padding:24upx 15upx;
}
.progressBox /deep/  .uni-progress-inner-bar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #FFFFFF;
}
.progressBox /deep/  .uni-progress-inner-bar .progressBoxItem{
	margin-right: 30upx;
	font-size: 22upx;
}
</style>

第二种方法（适用于H5项目）

mounted() {
			// 进度条写文字
			const list = Array.from(this.$refs.progressBox.$el.getElementsByClassName('uni-progress-inner-bar'));
			list.forEach((item,index)=>{
				item.setAttribute("num",this.progressBox[index].number)
			})
		   }

在上面css的基础上使用attr这个属性
<style scoped>
.progressBox /deep/  .uni-progress-inner-bar::after{
	content:attr(num)
}
</style>

第三种方法（适用于原生app项目，因为无法操作节点）
在这里插入图片描述

 <view class="progressBoxCon">
				 <view class="progressBox" ref="progressBox">
					 <view class="progressItem" v-for="(item,index) in progressBox" :key="index">
						 <view>{{item.province}}</view>
						 <progress class="progress" :num="item.number" :percent="item.percent" :activeColor="item.activeColor" active stroke-width="19" backgroundColor="none"/>
						 <view>{{item.ratio}}%</view>
					 </view>
				 </view>
 </view>

.progress::after{
	content: attr(num);
	margin-right: 30upx;
	font-size: 22upx;
	color: #FFFFFF;
	position: absolute;
	margin-left: 25upx;
}