uni-app 封装一个进度条组件

uni-app 封装一个进度条组件

在根目录下创建一个components文件夹，创建组件ProgressBar.vue

<template>
	<view class="uni-progress-bar">
		<div class="uni-progress_list">
			<!-- <text class="uni-progress_list-title">回收数量：<text class="uni-progress-title">116个</text></text> -->
			<view class="uni-progress_item">
				<view class="progress_row" v-for="(item,index) in unitList" :key="index">
					<text class="uni-progress_text">{
          
   {
          
   item.rangeTyle}}</text>
					<view class="bar">
						<view :class="[item.rangeNum>avgNum? barShow: bar_show_]"
							:style="{ width: showProgress(item.rangeNum)+%}"></view>
					</view>
					<view class="hint_text">
						<label><text style="color: red; font-weight: bold;">{
          
   {
          
   item.rangeNum}}</text>个</label>
					</view>
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
          
   
		props: {
          
   
			unitList: {
          
   
				type: Array,
				default: () => []
			},
			avgNum: Number | String, //平均值
			maxNum: Number | String, //最大值
		},
		methods: {
          
   
			showProgress(num) {
          
   
				if (this.maxNum == -- || this.maxNum == 0) {
          
   
					return 0
				} else {
          
   
					if (num > 0) {
          
   
						const w = Math.round((num / this.maxNum) * 100)
						return w
					} else {
          
   
						return 0
					}
				}
			}
		}
	}
</script>

<style>
	.uni-progress_item {
          
   
		margin-top: 30rpx;
		margin-left: 24rpx;
		margin-right: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.progress_row {
          
   
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.item_text {
          
   
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #666666;
		width: 100rpx;
		flex-shrink: 0;
		text-align: left;
		opacity: 1;
	}

	.barShow {
          
   
		height: 100%;
		width: 70.5%;
		background: linear-gradient(to right, red, yellow);
		border-radius: 8rpx;
		position: relative;
	}


	.hint_text {
          
   
		margin-top: 8rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		line-height: 28rpx;
		color: #333333;
		opacity: 1;
	}

	.bar_show_ {
          
   
		height: 100%;
		width: 70.5%;
		background-color: #D4DADD;
		border-radius: 8rpx;
		position: relative;
	}

	.bar {
          
   
		width: 346rpx;
		height: 16rpx;
		background-color: #F4F5F5;
		border-radius: 8rpx;
		margin-right: 24rpx;
		margin-left: 18rpx;
	}

	.uni-progress_list {
          
   
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		text-align: center;
	}

	.uni-progress-title {
          
   
		font-weight: bold;
		color: #2A71E7;
	}
</style>

组件的使用

<template>
	<view class="content">
		<ProgressBar :unitList="unitList" :avgNum="1" :maxNum="20"></ProgressBar>
	</view>
</template>

<script>
	import ProgressBar from ../../components/ProgressBar.vue
	export default {
          
   
		components: {
          
   
			ProgressBar
		},
		data() {
          
   
			return {
          
   
				unitList: [
					{
          
   
						rangeTyle: pod,
						rangeNum: 12
					},
					{
          
   
						rangeTyle: esx,
						rangeNum: 8
					},{
          
   
						rangeTyle: esx,
						rangeNum: 19
					},{
          
   
						rangeTyle: esx,
						rangeNum: 20
					},
				]
			}
		},
		onLoad() {
          
   

		},
		methods: {
          
   

		}
	}
</script>

最后效果是这样的: