Vue组件之滚动的数字

App.vue

<template>
  <div class="flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100" style="padding-top: 1000px; padding-bottom: 500px;">
      <div class="mx-0 md:mx-2 my-4 md:my-0 px-12 py-5 rounded-lg text-white text-2xl shadow bg-blue-500 hover:bg-blue-600">
        <count :to="119"></count>
      </div>
     <div class="mx-0 md:mx-2 my-4 md:my-0 px-12 py-5 rounded-lg text-white text-2xl shadow bg-purple-500 hover:bg-purple-600">
        <count :to="1119"></count>
      </div> 
      <div class="mx-0 md:mx-2 my-4 md:my-0 px-12 py-5 rounded-lg text-white text-2xl shadow bg-green-500 hover:bg-green-600">
        <count :to="351"></count>
      </div>
      <div class="mx-0 md:mx-2 my-4 md:my-0 px-12 py-5 rounded-lg text-white text-2xl shadow bg-teal-500 hover:bg-teal-600">
        <count :to="6351"></count>
      </div>
      <div class="mx-0 md:mx-2 my-4 md:my-0 px-12 py-5 rounded-lg text-white text-2xl shadow bg-red-500 hover:bg-red-600">
        <count :to="2351"></count>
      </div>
  </div>
</template>

<script>
import Count from './components/Count';

export default {
  name: 'app',
  components: {
    Count
  }
}
</script>

Count.vue

<template>
    <span v-text="count"></span>
</template>
<script>
import inView from 'in-viewport';

export default {
    props: ['to'],

    data() {
        return {
            count: 0,
            interval: null,
        }
    },

    computed: {
        increment() { // 步进值
            return Math.ceil(this.to / 20);
        }
    },

    mounted() {
        inView(this.$el, () => {
            console.log('it"s me!');
            this.interval = setInterval(this.tick, 50);
        });
        
    },

    methods: {
        tick() {
            if(this.count + this.increment >= this.to) {
                this.count = this.to;
                return clearInterval(this.interval);
            }
            
            return this.count += this.increment;
            
        }
    }
}
</script>

安装依赖：

yarn add in-viewport --dev