这是一个vue3 + scss的数字滚动效果

先容:
        当数字变化时，只改变变化的数字位，其余的不变，可以递增、递减、骤变、负数也可以，但是样式要根据详细的项目需求去改；
效果1、增加数字：

效果2、淘汰数字：

使用方法：

1. <template>
2.   <AnimatNumber :data="data" />
3. </template>
4.   
5. <script setup>
6. // 引入动画
7. import AnimatNumber from "./components/AnimatNumber.vue";
9. const data = ref(0);
11. setInterval(() => {
12.   data.value -= 30;
13. }, 2000);
14. </script>
15.   
16. <style lang="scss">
18. </style>
19.   

复制代码

组件代码(vue3)：

1. <template>
2.   <div class="num-wrap">
3.     <div v-for="(item, index) in computedData" :key="index" class="num-item">
4.       <div class="num-inner" ref="numInnerRef">
5.         <div class="prev">{{ item.newValue }}</div>
6.         <div class="current">{{ item.oldValue }}</div>
7.         <div class="next">{{ item.oldValue }}</div>
8.       </div>
9.     </div>
10.   </div>
11. </template>
13. <script setup>
14. // 数字滚动效果
15. import { onBeforeUnmount, watch, ref, nextTick } from "vue";
17. const props = defineProps({
18.   // 传进来的数据  number、string的number都可以
19.   data: {
20.     type: [Number, String],
21.     default: 999
22.   },
23.   // 动画持续时间  number、string的number都可以  最低1000ms
24.   duration: {
25.     type: [Number, String],
26.     default: 500
27.   },
28.   // 基本的高度 所有的动画移动距离都是和这个有关的，确保这个值和css的$height一样，否则有问题
29.   baseHeight: {
30.     type: Number,
31.     default: 50
32.   }
33. });
35. const numInnerRef = ref();
37. // raf演示器
38. const setTimeoutPolyfill = (func, delay) => {
39.   let startTime = Date.now();
40.   let rafId;
42.   function animationFrameCallback() {
43.     const currentTime = Date.now();
44.     const timeElapsed = currentTime - startTime;
46.     if (timeElapsed >= delay) {
47.       func();
48.     } else {
49.       rafId = requestAnimationFrame(animationFrameCallback);
50.     }
51.   }
52.   rafId = requestAnimationFrame(animationFrameCallback);
53.   // 返回一个取消函数
54.   return () => cancelAnimationFrame(rafId);
55. };
57. /*
58. 推演公式
59.     新          旧
60.     1001  ->   1000
61.     1002  ->   1001
62.     1003  ->   1002
63.     1004  ->   1003
64.     1005  ->   1004
65. */
67. const newArr = ref([]);
68. const oldArr = ref([]);
69. const computedData = ref(
70.   props.data
71.     .toString()
72.     .split("")
73.     .map((item, index) => ({ index, oldValue: item, newValue: item }))
74. );
75. const lock = ref(false);
76. // 延时器
77. const timer = ref({
78.   timerOne: null,
79.   timerTwo: null
80. });
82. watch(
83.   () => props.data,
84.   (newVal, oldVal) => {
85.     if (`${newVal}`.length !== `${oldVal}`.length) {
86.       lock.value = false;
87.     }
88.     if (!lock.value) {
89.       computedData.value = props.data
90.         .toString()
91.         .split("")
92.         .map((item, index) => ({ index, oldValue: item, newValue: item }));
93.       lock.value = true;
94.     }
95.     newArr.value = newVal
96.       .toString()
97.       .split("")
98.       .map((item, index) => ({ index, value: item }));
100.     oldArr.value = oldVal
101.       .toString()
102.       .split("")
103.       .map((item, index) => ({ index, value: item }));
104.     /*
105.       如果newArr的长度大于于oldArr的长度，则需要给oldArr从前面增加newArr.length - oldArr.length的长度的{ index, oldValue: '-', newValue: newValueItem },
106.       同时更新oldArr没有新增的index
107.     */
109.     // 新值和老值差
110.     const differLength = newArr.value.length - oldArr.value.length;
111.     if (newArr.value.length > oldArr.value.length) {
112.       for (let i = 0; i < differLength; i++) {
113.         oldArr.value.unshift({ index: i, value: "-" });
114.       }
115.       // 重新设置index
116.       oldArr.value.forEach((item, index) => (item.index = index));
117.     }
119.     // 改变的数字的索引集合
120.     const indexArr = [];
121.     newArr.value.forEach(item => {
122.       if (item.value !== oldArr.value[item.index].value) {
123.         indexArr.push(item.index);
124.       }
125.     });
126.     nextTick(() => {
127.       indexArr.forEach(diffIndex => {
128.         numInnerRef.value[diffIndex].children[0].innerHTML =
129.           newArr.value[diffIndex].value;
130.         numInnerRef.value[diffIndex].children[0].animate(
131.           [{ top: `${-props.baseHeight}px` }, { top: 0 }],
132.           {
133.             duration: props.duration,
134.             fill: "forwards"
135.           }
136.         );
137.         numInnerRef.value[diffIndex].children[1].animate(
138.           [{ top: "0" }, { top: `${props.baseHeight}px` }],
139.           {
140.             duration: props.duration,
141.             fill: "forwards"
142.           }
143.         );
144.         timer.value.timerOne = setTimeoutPolyfill(() => {
145.           numInnerRef.value[diffIndex].children[2].innerHTML =
146.             oldArr.value[diffIndex].value;
147.           timer.value.timerTwo = setTimeoutPolyfill(() => {
148.             numInnerRef.value[diffIndex].children[1].innerHTML =
149.               newArr.value[diffIndex].value;
150.           }, props.duration);
151.           numInnerRef.value[
152.             diffIndex
153.           ].children[2].style.top = `${-props.baseHeight}px`;
154.         }, props.duration);
155.       });
156.     });
157.   },
158.   { deep: true }
159. );
161. // 卸载
162. onBeforeUnmount(() => {
163.   timer.value.timerOne && timer.value.timerOne();
164.   timer.value.timerTwo && timer.value.timerTwo();
165. });
166. </script>
168. <style lang="scss" scoped>
169. $width: 50px;
170. $height: 50px;
171. .num-wrap {
172.   margin-top: 200px;
173.   display: flex;
174.   gap: 10px;
175.   .num-item {
176.     width: $width;
177.     height: $height;
178.     border: 1px solid #000;
179.     border-radius: 8px;
180.     font-size: 20px;
181.     font-weight: 600;
182.     position: relative;
183.     overflow: hidden;
184.     color: #0dfbff;
185.     background: rgba(0, 13, 23, 0.5);
186.     .num-inner {
187.       position: relative;
188.       width: $width;
189.       height: $height;
190.     }
191.     .prev,
192.     .current,
193.     .next {
194.       width: $width;
195.       height: $height;
196.       text-align: center;
197.       line-height: $width;
198.       position: absolute;
199.     }
200.     .prev {
201.       top: -$height;
202.     }
203.     .current {
204.       top: 0;
205.     }
206.     .next {
207.       top: $height;
208.     }
209.   }
210. }
211. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。