uniapp自定义进度条（vue或原生开发修改html标签即可）

1.创建滚动条标签

html 复制代码

<view class="progress-container">
	<view class="progress-bar gradient" :style="{ width: progress + '%' }"></view>
</view>

2.增加滚动条样式

css 复制代码

/* 进度条容器 */
.progress-container {
	width: 100%;
	height: 20rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
	overflow: hidden;

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg,
		    #ff2d55 0%,
		    #ff9500 25%,
			#ffcc00 50%,
			#4cd964 75%,
			#5ac8fa 100%);
			background-size: 200% 100%;
			animation: gradient-animation 3s ease infinite;
	}
}

3.data创建字段progress 、animationId

progress ：用来动态修改滚动条滚动距离

animationId ：防止重复启动

4.根据时间控制进度条速度

javascript 复制代码

animateProgress() {
	if (this.animationId) return;  //防止重复启动
	const startTime = performance.now();  //获取时间源
	let current = this.progress;
	let duration = 3000  //总时间 3秒

	const step = (e) => {
		const elapsed = e - startTime;
		this.progress = (Math.min(elapsed / duration, 1)) * 100;
		if (this.progress < 100) {
			this.animationId = requestAnimationFrame(step);
		} else {
			console.log('进度完成！');
		}
	};
	this.animationId = requestAnimationFrame(step);
}

5.完整代码

html 复制代码

<template>
    <view class="progress-container">
		<view class="progress-bar gradient" :style="{ width: progress + '%' }"></view>
	</view>
</template>
<script>
    export default {
        data() {
			return {
                progress : 0,
                animationId : null
            }
        },
        onLoad(){
            this.animateProgress()
        },
        methods:{
            animateProgress() {
	            if (this.animationId) return;
	                const startTime = performance.now();
	                let current = this.progress;
	                let duration= 3000

	                const step = (e) => {
		                const elapsed = e - startTime;
		                this.progress = (Math.min(elapsed / duration, 1)) * 100;
		                if (this.progress < 100) {
			                this.animationId = requestAnimationFrame(step);
		                } else {
			                console.log('进度完成！');
		                }
	                };
	                this.animationId = requestAnimationFrame(step);
                }
        }
    }
</script>
<style lang="scss" scoped>
/* 进度条容器 */
.progress-container {
	width: 100%;
	height: 20rpx;
	background-color: #f5f5f5;
	border-radius: 20rpx;
	overflow: hidden;

	.progress-bar {
		height: 100%;
		background: linear-gradient(90deg,
		    #ff2d55 0%,
		    #ff9500 25%,
			#ffcc00 50%,
			#4cd964 75%,
			#5ac8fa 100%);
			background-size: 200% 100%;
			animation: gradient-animation 3s ease infinite;
	}
}
</style>

6.样式

7.扩展（暂停/继续）

isPaused：控制是否暂停 false为暂停 true为开始初始化false

pauseStartTime：暂停时间

accumulatedPauseTime：暂停时间长度

开始

javascript 复制代码

this.accumulatedPauseTime = performance.now()
requestAnimationFrame(this.animateProgress)

暂停/继续

javascript 复制代码

isPausedBtn(){
				if (!this.animationId) return;
				if(!this.isPaused){
					this.isPaused = true
					this.pauseStartTime = performance.now();
					cancelAnimationFrame(this.animationId);
				}else{
					this.isPaused = false
					this.accumulatedPauseTime += performance.now() - this.pauseStartTime;
					this.animationId = requestAnimationFrame(this.animateProgress);
					
				}
				
			}，
animateProgress(e) {
	            if (this.isPaused) return;
	                let current = this.progress;
	                let duration= 3000
                    const elapsed = e - this.accumulatedPauseTime;
		            this.progress = (Math.min(elapsed / duration, 1)) * 100;
		            if (this.progress < 100) {
			            this.animationId = requestAnimationFrame(this.animateProgress);
		            } else {
			            console.log('进度完成！');
		            }
	                this.animationId = requestAnimationFrame(this.animateProgress);
                }