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

1.创建滚动条标签

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

2.增加滚动条样式

/* 进度条容器 */ .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.根据时间控制进度条速度

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 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：暂停时间长度

开始

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); }