【vue2】实现数字纵向滚动效果（计时器效果）

需求：

在页面中显示一个数字，并在进入视口时显示计时器滚动效果：

 效果如上 ↑

 

新建组件ScrollNumber.vue：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

<template>   <div     style="       display: inline-flex;       justify-content: flex-start;       align-items: center;     "   >     <div       v-for="(item, index) in numberList"       :key="index"       style="         display: inline-flex;         justify-content: flex-start;         align-items: center;         padding-bottom: 0.3rem;         box-sizing: border-box;       "     >       <span v-if="isNaN(item)">{{ item }}</span>       <div class="number" v-else>         <span           class="number-item"           ref="numberItem"           :data-number="item"           :data-index="index"           >0123456789</span         >       </div>     </div>   </div> </template>   <script> export default {   name: "ScrollNumber",   props: {     value: {       type: [String, Number],       default: 0,     },   },   watch: {     value(newVal) {       if (newVal) {         this.$nextTick(() => {           this.setNumberTransform();         });       }     },   },   computed: {     numberList() {       return String(this.value).split("");     },   },   data() {     return {       hasShow: false, // 是否已展示过动画     };   },   mounted() {     window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域   },     methods: {     scrollHandle() {       const offset = this.$el.getBoundingClientRect();       const offsetTop = offset.top;       const offsetBottom = offset.bottom;       // 进入可视区域       if (offsetTop <= window.innerHeight && offsetBottom >= 0) {         this.setNumberTransform();         this.hasShow = true;         window.removeEventListener("scroll", this.scrollHandle, true);       } else {         // 移出可视区域         if (this.hasShow) {           window.removeEventListener("scroll", this.scrollHandle, true);         }       }     },     // 设置每一位数字的偏移     setNumberTransform() {       let numberItems = this.$refs.numberItem;       let obj = {};       Array.from(numberItems).forEach((c) => {         let key = c.dataset.index;         let value = c.dataset.number;         let init = 0;         obj[key] = setInterval(() => {           if (init < value * 10) {             init += 1;             c.style.transform = `translateY(-${init}%)`;           } else {             clearInterval(obj[key]);             obj[key] = null;           }         }, 8);       });     },   }, }; </script>   <style scoped lang="less"> .number {   width: 0.42rem;   height: 0.62rem;   font-size: 0.56rem;   font-weight: 800;   color: #ffe52c;   text-align: center;   overflow: hidden;   line-height: 0.42rem;   > span {     text-align: center;     writing-mode: vertical-rl;     text-orientation: upright;     transform: translateY(0%);   } } </style>

　　

使用：

?

1	import ScrollNumber from "../ScrollNumber/ScrollNumber.vue";

　　

?

1	<scroll-number :value="num.toString()"></scroll-number>

　　

p.s.本篇copy了网上大佬的代码，打个点方便以后继续copy