vue进度条怎么循环加载
时间: 2023-10-31 14:04:33 浏览: 93
要实现 vue 的循环加载进度条,你可以使用 Vue.js 的计时器(`setInterval()`)来实现。以下是一个示例代码:
```html
<template>
<div>
<div class="progress-bar" :style="{ width: width + '%' }"></div>
</div>
</template>
<script>
export default {
data() {
return {
width: 0,
intervalId: null,
};
},
mounted() {
this.startProgress();
},
methods: {
startProgress() {
this.intervalId = setInterval(() => {
if (this.width === 100) {
this.width = 0;
} else {
this.width += 10;
}
}, 1000);
},
},
beforeDestroy() {
clearInterval(this.intervalId);
},
};
</script>
<style>
.progress-bar {
height: 10px;
background-color: blue;
}
</style>
```
在上面的代码中,我们首先在 `data` 中定义了一个 `width` 变量和一个 `intervalId` 变量,分别用于保存进度条的宽度和计时器的 ID。然后,在 `mounted` 钩子中调用 `startProgress` 方法来启动计时器。
`startProgress` 方法中使用 `setInterval` 函数来定时更新进度条的宽度。当进度条的宽度达到 100% 时,我们将其重置为 0,以实现循环加载的效果。最后,在 `beforeDestroy` 钩子中清除计时器,以防止内存泄漏。
在模板中,我们使用 `:style` 绑定来设置进度条的宽度,并将其绑定到 `width` 变量上。我们还为进度条添加了一些基本的 CSS 样式,以使其可见。
希望这个示例能帮助你实现循环加载进度条。
阅读全文