vue3实现数字滚动特效实例详解

下面我会详细讲解“vue3实现数字滚动特效实例详解”的完整攻略。

1. 确定需求与实现思路

在制作数字滚动特效前，我们需要明确需求和实现思路。首先，我们需要使用Vue 3框架进行开发，并采用Vue 3中的Composition API编写代码。其次，我们需要使用CSS样式和JavaScript代码来实现数字滚动的特效。最后，我们需要将数字滚动特效封装为Vue组件。

2. 创建Vue组件

在Vue 3中，使用Composition API编写组件代码。我们可以使用defineComponent函数来定义Vue组件。代码示例如下：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    startValue: {
      type: Number,
      default: 0
    },
    endValue: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 1500
    }
  },
  setup(props) {
    // 组件代码将在这里编写
  }
});

3. 编写数字滚动的特效样式

我们可以使用CSS样式来实现数字滚动的特效。代码示例如下：

.number-rolling {
  font-size: 24px;
  font-weight: bold;
  color: #f60;
  text-shadow: #000 1px 0 0px, #000 0 1px 0px, #000 -1px 0 0px, #000 0 -1px 0px;

  .inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
  }

  .roll {
    position: absolute;
    left: 0;
    top: 0;
    animation: numberRoll 1.5s linear forwards;
  }

  @keyframes numberRoll {
    from {
      transform: translateY(0)
    }
    to {
      transform: translateY(-100%);
    }
  }
}

4. 编写数字滚动的特效逻辑

在Vue组件中，使用setup函数来编写数字滚动的特效逻辑。代码示例如下：

import { defineComponent, ref, watchEffect } from 'vue';

export default defineComponent({
  props: {
    startValue: {
      type: Number,
      default: 0
    },
    endValue: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 1500
    }
  },
  setup(props) {
    const currentValue = ref(props.startValue);

    // 监听 props.startValue 和 props.endValue 的变化，触发数字滚动特效
    watchEffect((onInvalidate) => {
      const diffValue = props.endValue - currentValue.value;
      const count = Math.ceil(diffValue / (props.duration / 16));
      const step = diffValue / count;

      let currentCount = 0;

      const timer = setInterval(() => {
        const newValue = currentValue.value + step;
        if ((newValue >= props.endValue && step > 0) || (newValue <= props.endValue && step < 0)) {
          clearInterval(timer);
          currentValue.value = props.endValue;
          return;
        }
        currentValue.value = newValue;
        currentCount++;
        if (currentCount >= count) {
          clearInterval(timer);
          currentValue.value = props.endValue;
        }
      }, 16);

      onInvalidate(() => {
        clearInterval(timer);
      });
    });

    return {
      currentValue
    };
  }
});

5. 在模板中使用数字滚动组件

最后，在模板中使用定义好的数字滚动组件。代码示例如下：

<template>
  <div class="number-rolling">
    <div class="inner">
      <span>{{ Math.round(currentValue) }}</span>
      <span class="roll">{{ Math.round(currentValue) }}</span>
    </div>
  </div>
</template>

<script>
import NumberRoll from './NumberRoll.vue';

export default {
  components: {
    NumberRoll
  },
  data () {
    return {
      value: 12345
    }
  }
}
</script>

在这个示例中，我们创建了一个名为NumberRoll的Vue组件，用来实现数字滚动的特效。我们使用watchEffect函数来监听数字变化，并触发数字滚动特效。最后，在模板中使用NumberRoll组件，并传入要滚动到的数字值即可使用。