本文介绍了在Vue中使用H5的progress标签实现一个动态加载的进度条。根据不同的时间阶段，进度条增加速度不同，从0到5秒每秒增加8%，5到10秒每秒增加4%，10到20秒每秒增加2%，超过20秒则每秒增加0.2%，最大不超过95%。当接口返回成功时，进度条逐渐填充至100%，并提供了一个名为getData的方法来处理接口响应。
要求：
*载入：
0~5秒，每秒增加8%进度；
5~10秒，每秒增加4%进度；
10~20秒，每秒增加2%进度；
超过20秒，每秒增加0.2%进度，最多不超过95%*
data(){
return{
progressValue: 0,
}
}
methods：{
// 进度条的控制
getProgress() {
let num = 0;
let progress = 0.0;
this.firstTime = setInterval(() => {
num += 1;
if (num <= 5) {
progress += 8;
} else if (num <= 10) {
progress += 4;
} else if (num <= 20) {
progress += 2;
} else if (num <= 30) {
if (progress < 95){
progress += 0.2;
}
}else{
clearInterval(this.firstTime)
最低0.47元/天 解锁文章
扫一扫
1598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
