javascript - Bootstrap Vue : How to make progress bar fill smoothly over time

Question

我正在使用 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>

有没有办法让进度条在指定的时间内平滑加载？

谢谢!

Answer 1

也许这对你有好处

<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。