uni-app写一个近度条组件

我就是我 2022-10-13 12:59 124阅读 0赞

<template>
    	<view>
    		<view class="ProgressBar">
    			<view class="ProgressBar_line_nei"></view>
    			<view class="ProgressBar_line" :style="{width:Truewidth+'px'}"></view>
    			<view class="ProgressBar_img" :style="{'margin-left':percentage<19?Truewidth-19+'px':Truewidth-70+5+'px'}">
    				{ { percentage}}%
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	var sysinfo = uni.getSystemInfoSync();
    	export default { 
    		name: "ProgressBar",
    		props:{ 
    			percentage:{ 
    				type:[String,Number],
    				default:60
    			},
    			Truewidth:{ 
    				type:[String,Number],
    				default:0
    			},
    			syswidth:{ 
    				type:[String,Number],
    				default:sysinfo.screenWidth
    			}
    		},
    		data() { 
    			return { 
    				 
    			}
    		},
    		onLoad() { 
    			 
    		},
    		methods: { 
    
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
    	.ProgressBar { 
    		margin-top: 10px; 
    		.ProgressBar_line_nei { 
    			width: 100%;
    			height: 10px;
    			background: #F2F3F7;
    		}
    
    		.ProgressBar_line { 
    			width: 50%;
    			height: 10px;
    			margin-top: -10px;
    			background: linear-gradient(to right, #fdc54c, #ef1a3d);
    		}
    
    		.ProgressBar_img { 
    			background-image: url(https://cdn.weipaitang.com/static/20210114a8203a08-007b-3a08007b-b9f2-1dd5bb3bf393-W106H52);
    			background-size: 100% 100%;
    			background-position: 0 0;
    			height: 30px;
    			position: absolute;
    			margin-top: -18px;
    			width: 70px; 
    			text-align: center;
    			color: #fff;
    			font-size: 12px;
    			line-height: 25px; 
    			 
    		}
    	}
    </style>

使用：

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221005/0b36dd79830b4bc6acc33365aa46d35b.png