溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue怎么實現接口進度條效果”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue怎么實現接口進度條效果”文章能幫助大家解決問題。
首先定義一個進度條組件來渲染頁面展示效果，組件包含進度條背景、進度長度、以及進度數字，同時還要設置數據綁定相關屬性，如進度條當前的百分比、動畫執行狀態、以及完成狀態等。在請求數據的過程中，需要添加監聽函數來監測數據請求的過程變化，并更新組件相應的屬性和界面元素。
下面是使用 Vue 實現一個接口進度條的栗子：
<template>
<div class="progress-bar">
<div class="bg"></div>
<div class="bar" :></div>
<div class="label">{{ progress }}%</div>
</div>
</template>
<script>
export default {
data() {
return {
progress: 0,
isPlaying: false,
isCompleted: false
}
},
mounted() {
this.start();
},
methods: {
start() {
this.isPlaying = true;
this.animateProgress(90)
.then(() => {
if (!this.isCompleted) {
this.animateProgress(100);
}
})
.catch((error) => {
console.error('Progress error', error);
});
},
animateProgress(target) {
return new Promise((resolve, reject) => {
let start = this.progress;
const end = target;
const duration = (target - start) * 150;
const doAnimation = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
this.progress = start + ((end - start) * progress);
if (progress === 1) {
resolve();
} else if (this.isCompleted) {
resolve();
} else {
requestAnimationFrame(doAnimation);
}
};
const startTime = Date.now();
requestAnimationFrame(doAnimation);
});
},
finish() {
this.isCompleted = true;
this.progress = 100;
}
}
};
</script>
<style scoped>
.progress-bar {
position: relative;
height: 8px;
margin: 10px 0;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 5px;
}
.bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 5px;
background-color: #409eff;
transition: width 0.5s;
}
.label {
position: absolute;
top: -20px;
left: calc(100% + 5px);
color: #333;
font-size: 12px;
}
</style>首先定義了三個數據屬性用于控制動畫的播放和完成狀態，分別是進度條當前比例 progress、動畫播放狀態 isPlaying、動畫完成狀態 isCompleted。在組件初始化的過程中，調用了 start 方法來啟動進度條動畫效果。在該方法內部，使用 Promise 來從 0% 到 90% 的百分比向相應位置移動，并在到達該位置時停止。
判斷當前是否完成，如果沒有完成則再次調用 animateProgress(100) ，并在進度加載期間檢查是否有數據返回。若存在，則停止前半段動畫，并使用1秒鐘將進度條填充至100%。
下面講解一下如何在請求數據的過程中添加監聽函數：
import axios from 'axios'; import ProgressBar from './ProgressBar.vue'; const progressBar = new Vue(ProgressBar).$mount(); document.body.appendChild(progressBar.$el);
在這個代碼片段中，使用了 Axios 攔截器來監聽請求的過程。在請求開始之前，向頁面添加進度條組件，之后將該組件掛載到頁面中，并且將其元素追加到 HTML 的 <body> 標記尾部。
接下來，通過 onDownloadProgress 監聽函數來監測下載進度的變化。如果加載完成則移除進度條組件。同時，也可以實現針對使用不同 API 的 ajax 請求設定不同的進度條，以達到更佳的用戶體驗效果。
axios.interceptors.request.use((config) => {
const progressBar = new Vue(ProgressBar).$mount();
document.body.appendChild(progressBar.$el);
config.onDownloadProgress = (event) => {
if (event.lengthComputable) {
progressBar.progress = parseInt((event.loaded / event.total) * 100, 10);
if (progressBar.progress === 100) {
progressBar.finish();
setTimeout(() => {
document.body.removeChild(progressBar.$el);
}, 500);
}
}
};
return config;
}, (error) => {
return Promise.reject(error);
});為了能夠靈活地調整接口進度條效果，可以使用參數注入來控制動畫速度和完成時間的設定。在 animateProgress 函數中，使用傳參來設置百分比范圍和動畫播放速度，從而得到不同進度條和播放時間的效果。
animateProgress(target, duration) {
return new Promise((resolve, reject) => {
let start = this.progress;
const end = target;
const doAnimation = () => {
const elapsed = Date.now() - startTime;
const progress = Math.min(elapsed / duration, 1);
this.progress = start + ((end - start) * progress);
if (progress === 1) {
resolve();
} else if (this.isCompleted) {
resolve();
} else {
requestAnimationFrame(doAnimation);
}
};
const startTime = Date.now();
requestAnimationFrame(doAnimation);
});
}
...
this.animateProgress(90, 1000)
.then(() => {
if (!this.isCompleted) {
this.animateProgress(100, 500);
}
})
...在這個栗子中，將 duration 參數添加到 animateProgress 函數內部，并使用該參數來設置動畫速度和完成時間。在第一個調用函數的時候，將異步進度條的播放時間設為 1000ms，從而得到速度較慢、完成時間較長的進度條效果。在第二個調用函數時，將進度條完成時間縮短為 500ms，并獲得由此帶來的更快動畫效果。
關于“Vue怎么實現接口進度條效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
