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

第一种方法（适用于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>{{}}</view>
						 <progress class="progress"  :percent="" :activeColor="" active stroke-width="19" backgroundColor="none"/>
						 <view>{{}}%</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 = (this.$.$('uni-progress-inner-bar'));
			((item,index)=>{
				// 创建新元素节点<span>标签
				let spans = ('span');
				// 添加样式类名
				("progressBoxItem");
				// 将元素插入到父级内
				(spans);
				// 输出数据
				 = [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>
  
  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

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

• 1
• 2
• 3
• 4
• 5
• 6

第三种方法（适用于原生app项目，因为无法操作节点）

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8