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

1.创建滚动条标签view classprogress-container view classprogress-bar gradient :style{ width: progress % }/view /view2.增加滚动条样式/* 进度条容器 */ .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 、animationIdprogress 用来动态修改滚动条滚动距离animationId 防止重复启动4.根据时间控制进度条速度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.完整代码template view classprogress-container view classprogress-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 langscss 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; } } /style6.样式7.扩展暂停/继续isPaused控制是否暂停 false为暂停 true为开始 初始化falsepauseStartTime暂停时间accumulatedPauseTime暂停时间长度开始this.accumulatedPauseTime performance.now() requestAnimationFrame(this.animateProgress)暂停/继续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); }