uniapp 经验值效果的进度条

插件地址：点击获取原作

一、新建components—>my-progress.vue

这个是从插件市场拿到的，然后根据自己需要而进行了部分修改

<template>
	<view class="progress-box">
		<view class="progress-box-sgin" v-bind:style="{width:getSginWid}">
			<view :animation="animationData" class="progress-box-sgin-n" v-bind:style="{background:contentBacColor}">
				<text v-bind:style="{color:contentColor}">{{content}}</text>
			</view>
		</view>
		<view class="progress-box-w" v-bind:style="[{background:progressColor,width:getWid}]">
			 <view class="progress-box-w-w" v-bind:style="{background:progressBckColor}" :animation="animationData" >
				 <!-- <view class="progress-box-w-n" v-bind:style="{background:progressColor}"></view> -->
			 </view>
		</view>
		
	</view>
</template>

<script>
	export default {
		created: function() {
			//创建一个动画实列
			var animation = uni.createAnimation({
				//动画持续时间
				duration: this.time,
				//动画定义效果
				timingFunction: this.type,
			})
			this.animation = animation
			//调用cpMobile方法获取动画从左向右平移位置长度
			this.cpMobile()
			//定时器
			setTimeout(function() {
				animation.translate(this.mobilePx).step()
				this.animationData = animation.export()
			}.bind(this), 100)
		},
		props:{
			//当前数值
			nowD:{},
			//总数值
			sumD:{},
			//指针上的文字
			content:'',
			//指针上的文字颜色
			contentColor:{
				type: String,
				default: 'rgba(3,144,252,1)'
			},
			//指针背景色
			contentBacColor:{
				type: String,
				default: '#F4F4F4'
			},
			//动画时长 单位毫秒
			time:{
				type: Number,
				default: 1000
			},
			//未完成的进度条颜色
			progressBckColor:{
				type: String,
				default: 'rgba(8, 172, 233,1)'
			},
			//已完成的进度条颜色
			progressColor:{
				type: String,
				default: '#FFFFFF'
			},
			//进度条总长度，单位PX
			wid:{
				type: Number,
				default: 280
			},
			//动画类型
			type:{
				type: String,
				default: "ease"
			}
		},
		computed:{
			//已完成的长度
			getWid(){
				console.log("========",this.wid.toString())
				return this.wid.toString()+"rpx"
			},
			getSginWid(){
				console.log("--------",(this.wid+40).toString())
				return (this.wid+40).toString()+"rpx"
			}
		},
		data() {
			return {
				animationData: {},
				mobilePx:0,
			};
		},
		methods: {
			cpMobile(){
				//当前值\总数值=进度条总长度
				this.mobilePx=(this.nowD/this.sumD*this.wid)+'rpx'
				console.log("偏移量",this.mobilePx)
			}
		}
	}
</script>

<style >
	
	.progress-box {
		display: flex;
		margin: auto auto;
		flex-direction: column;
	}
	
	.progress-box-sgin{
		height: 80rpx;
		margin: auto auto;
		
	}
	//指针
	.progress-box-sgin-n{
		text-align: center;
		position: relative;
		font-size: 22rpx;
		width: 120rpx;
		height: 40rpx;
		border-radius: 10rpx;
		margin-left: -60rpx;
		box-shadow:0px 3px 6px rgba(3,144,252,1);
	}
	.progress-box-sgin-n>text{
		width:8px;
		height:20px;
		font-size:15px;
		font-family:SFProText-Semibold;
		line-height:20px;
		opacity:1;
	}
	
	.progress-box-sgin-n:after{
		position: absolute;
		left: 0rpx;
		right: 0;
		top: 60rpx;
		content: '';
		width: 0;
		height: 0;
		margin: auto auto;
		border: 16rpx solid #F4F4F4;
		border-color: #F4F4F4 transparent  transparent transparent;
	}
	.progress-box-w {
		overflow:hidden;
		margin: auto auto;
		/* border-radius: 10rpx; */
		background-color:  #FFFFFF;
		
	}
	.progress-box-w-w{
		/* border-radius: 10rpx; */
		width: 100%;
		height: 10rpx;
	}
	/* .progress-box-w-n{
		height: 10rpx;
		background-color:  #FFFFFF;
		width: 20rpx;
		border-radius: 50%;
	} */
</style>

二、新建页面进行使用

这里只给了一半页面的代码，看看效果就好了

另外需要注意的是，如果需要给父组件中MyProgress动态绑定值，那么就把子组件中的created修改成watch

<template>
	<view class="main">
		<!-- 蓝色-上半部分 -->
		<view class="yi">
			<view class="txt">
				<text>个人中心</text>
			</view>
			<!-- 第一部分 -->
			<view class="One">
				<view>
					<image src="../../../static/detail_Img/slideshow%20.png"></image>				
				</view>
				<view>
					<view class="One_1">
						<text>Ming_zi</text>
						<image src="../../../static/(3).png"></image>
					</view>
					<view class="One_2">
						<text>2021-10-11到期</text>
						<text>购买记录</text>
						<text>></text>
						<!-- <image src="../../../static/detail_Img/right.png"></image> -->
					</view>
				</view>
			</view>
			<!-- 第二部分 -->
			<view class="Two">
				<view>
					<view class="v1">
						<image src="../../../static/detail_Img/liu.png"></image>
					</view>
					<view class="v2">
						<MyProgress class="jdt" :nowD="50" :sumD="100" :content='"50"' :contentColor='"rgba(3,144,252,1)"' :contentBacColor='"#ffffff"' :time="3000" :wid="326" :type='"linear"'></MyProgress>
					</view>
					<view class="v3">
						<text>LV1</text>
					</view>
					<view class="v4">
						<button>立即升级</button>
					</view>
				</view>
				<view>
					<text class="v2_txt">积分：50/100</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import MyProgress from "@/components/my-progress.vue"
	export default {
		components: {
			MyProgress
		},
		data() {
			return {
				
			}
		},
		
		methods: {

		}
	}
</script>

<style>
	/* 全局 */
	.main{
		width: 100%;
		/* height: 2000rpx; */
		background: #f3f3f3;
	}
	
	.yi{
		width: 100%;
		height: 740rpx;
		background: #01c0f2;
	}

	/* 顶部 */
	.txt{
		width: 100%;
		height: 146rpx;
		text-align: center;
	}
	.txt>text{
		display: inline-block;
		line-height: 130rpx;
		height: 60rpx;
		margin-top: 28px;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	
	
	/* 第一部分 */
	.One{
		padding-top: 80rpx;
		margin: auto;
		width: 90%;
		height: 120rpx;
	}
	.One>view:nth-of-type(1){
		padding: 6rpx 6rpx 6rpx 6rpx;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		background: #FFFFFF;
	}
	.One>view:nth-of-type(1)>image:nth-of-type(1){
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.One>view:nth-of-type(2){
		margin-left: 130rpx;
		width: 544rpx;
		height: 120rpx;
		margin-top: -122rpx;
	}
	.One_1{
		text-align: left;
		line-height: 60rpx;
		width: 100%;
		height: 60rpx;
	}
	.One_1>text:nth-of-type(1){
		font-size: 34rpx;
		color: #FFFFFF;
	}
	.One_1>image{
		width: 40rpx;
		height: 20rpx;
		margin-left: 20rpx;
	}
	.One_2{
		text-align: left;
		line-height: 60rpx;
		width: 100%;
		height: 60rpx;
	}
	.One_2>text:nth-of-type(1){
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.One_2>text:nth-of-type(2){
		font-size: 26rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
	}
	.One_2>text:nth-of-type(3){
		font-size: 32rpx;
		color: #FFFFFF;
		margin-left: 8rpx;
	}
	/* .One_2>image{
		float: right;
		margin-right: 150rpx;
		margin-top: 20rpx;
		width: 26rpx;
		height: 26rpx;
		vertical-align: bottom;
	}
	 */
	
	/* 第二部分 */
	.Two{
		padding-top: 60rpx;
		margin: auto;
		width: 90%;
		height: 186rpx;
	}
	.Two>view:nth-of-type(1){
		display: inline-block;
		width: 100%;
		height: 120rpx;
		vertical-align: bottom;
	}
	.v1{
		display: inline-block;
		width: 60rpx;
		height: 100%;
		vertical-align: bottom;
	}
	.v1>image{
		margin-top: 56rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.v2{
		display: inline-block;
		width: 328rpx;
		height: 100%;
	}
	.v3{
		display: inline-block;
		width: 60rpx;
		height: 100%;
		vertical-align: bottom;
	}
	.v3>text{
		margin-top: 69rpx;
		display: inline-block;
		text-align: center;
		line-height: 30rpx;
		font-size: 18rpx;
		border-radius: 16rpx; 
		width: 60rpx;
		height: 30rpx;
		color: #FFFFFF;
		background: #08ace9;
		margin-left: 4rpx;
	}
	.v4{
		display: inline-block;
		vertical-align: bottom;
	}
	.v4>button{
		display: inline-block;
		font-size: 26rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 56rpx;
		width: 160rpx;
		height: 56rpx;
		margin-left: 30rpx;
	}
	.Two>view:nth-of-type(2){
		display: inline-block;
		width: 100%;
		height: 60rpx;
		vertical-align: bottom;
	}
	.v2_txt{
		margin-left: 130rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	
	
	/* 第三部分 */
	.Three{
		position: relative;
		top: -130rpx;
		margin: auto;
		width: 90%;
		height: 300rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		color: #666666;
	}
	.Three_1{
		padding-top: 60rpx;
		line-height: 60rpx;
		margin: auto;
		width: 90%;
		height: 60rpx;
	}
	.Three_1>image:nth-of-type(1){
		position: absolute;
		top: 76rpx;
		width: 30rpx;
		height: 30rpx;
		vertical-align: bottom;
	}
	.Three_1>text:nth-of-type(1){
		margin-left: 40rpx;
		font-size: 26rpx;
	}
	.Three_1>text:nth-of-type(2){
		float: right;
		margin-right: 10rpx;
		font-size: 26rpx;
	}
	.Three_1>image:nth-of-type(2){
		float: right;
		margin-top: 22rpx;
		width: 16rpx;
		height: 16rpx;
		vertical-align: bottom;
	}
	.Three_2{
		padding-top: 20rpx;
		margin: auto;
		width: 90%;
		height: 120rpx;
	}
	.Three_2>view:nth-of-type(1){
		display: inline-block;
		text-align: left;
		line-height: 120rpx;
		width: 340rpx;
		height: 120rpx;
		vertical-align: bottom;
	}
	.Three_2>view:nth-of-type(1)>text:nth-of-type(1){
		font-weight: bold;
		font-size: 70rpx;
	}
	.Three_2>view:nth-of-type(1)>text:nth-of-type(2){
		font-size: 26rpx;
		margin-left: 10rpx;
	}
	.Three_2>view:nth-of-type(2){
		position: absolute;
		top: 152rpx;
		left: 388rpx;
		display: inline-block;
		width: 1rpx;
		height: 90rpx;
		background: #e9e9e9;
	}
	.Three_2>view:nth-of-type(3){
		display: inline-block;
		width: 200rpx;
		height: 120rpx;
		float: right;
	}
	.Three_2>view:nth-of-type(3) button{
		margin-top: 40rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		float: right;
		width: 140rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background: #01c3f2;
		color: #FFFFFF;
	}
	
	
	/* 第四部分 */
	.Four{
		position: relative;
		top: -80rpx;
		margin: auto;
		width: 90%;
		height: 256rpx;
		background: #f3f3f3;
		display: flex;
		justify-content: space-between;
	}
	.Four>view{
		background: #FFFFFF;
		width: 210rpx;
		height: 100%;
		border-radius: 20rpx;
		text-align: center;
	}
	.Four>view>view{
		/* position: absolute;
		top: 46rpx;
		left: 55rpx; */
		margin-top: 46rpx;
		margin-left: 55rpx;
		width: 100rpx;
		height: 100rpx;
		background: #e5f5fc;
		border-radius: 50%;
	}
	.Four>view>view>image{
		margin-top: 15rpx;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.Four>view>text{
		margin-top: 30rpx;
		display: inline-block;
		font-size: 36rpx;
		font-weight: 500;
		color: #666666;
	}
</style>