javascript - Bootstrap Vue:如何使进度条随着时间的推移平滑填充
问题描述
我正在使用 VueJS 和 Bootstrap-Vue 开发一个项目。我正在使用进度条作为加载屏幕的一部分。我希望它在 3 秒内顺利加载。我可以完成这项工作,但加载进度不稳定。
我使用 SetTimeOut 来推进进度条。我已经尝试了很多不同的时间组合,但我就是不能让它看起来足够平滑。
<template>
<div>
<div class="row pt-5">
<div class="col-md-12 text-center pt-5">
<h1>{{this.timer}}</h1>
<b-progress height="2rem" :striped=true show-progress :animated=true>
<b-progress-bar :value="value" variant="success">
<h5 v-if="value > 0">Loading</h5>
</b-progress-bar>
</b-progress>
<!--<b-progress height="2rem" variant="success" :value="value" show-progress class="mb-2"></b-progress>-->
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapGetters} from 'vuex';
export default {
data() {
return {
timer: 4,
value: 0
}
},
mounted() {
this.startTimer();
},
methods: {
startTimer() {
let vm = this;
setTimeout(function () {
vm.timer = vm.timer - 0.1;
vm.value = vm.value + 7;
if (vm.timer !== 0) {
vm.startTimer();
} else {
console.log('done');
}
}, 25);
}
},
}
</script>
<style scoped>
</style>
有没有办法让进度条在指定的时间内顺利加载?
谢谢!
解决方案
也许这对你有好处
<template>
<div>
<div class="row pt-5">
<div class="col-md-12 text-center pt-5">
<h1>{{this.timer}}</h1>
<b-progress :max="max" height="2rem" :striped="true" show-progress :animated="true">
<b-progress-bar :value="value" variant="success">
<h5 v-if="value > 0">Loading</h5>
</b-progress-bar>
</b-progress>
<!--<b-progress height="2rem" variant="success" :value="value" show-progress class="mb-2"></b-progress>-->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: 0,
value: 0,
max: 180
};
},
mounted() {
this.startTimer();
},
methods: {
startTimer() {
let vm = this;
let timer = setInterval(function() {
vm.value += 6;
if (vm.value >= 180) clearInterval(timer);
}, 100);
}
}
};
</script>
<style scoped>
</style>
我不知道 vm.timer 在你的代码中有什么意义。所以更改 vm.timer 的部分以适合此代码。
顺便说一句,出于性能原因,我将 setTimeOut 更改为 setInterval。
推荐阅读
- r - 使用列表填充数据框的列
- python - urlopen 无法连接到网站
- python - 在 PySpark 中,使用 regexp_replace,如何用另一列的值替换一个组?
- docker - Cloud Run 和 Revel 容器
- python - 使用 python json 转义字符
- sql - 根据其他查询的结果运行 Select 查询
- flutter - FutureBuilder、SetState:删除 setState 时变量未更新
- jquery - jQuery:保存和恢复多选框的选择状态
- r - 如何在绘图中添加相关值( ggplot )
- apollo - Apollo GraphQL 出现“不变违规”错误