设置数字串动态滚动效果

HTML代码段

 <div class="data">
   <span>今日入区车辆</span>
   <div class="box-item">
       <li
         v-for="(item, index) in orderCarsNum"
         :key="index"
         :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
       >
         <em v-if="!isNaN(item)">
           <i ref="numberItem">0123456789</i>
         </em>
         <em v-else class="comma">{{ item }}</em>
      </li>
   </div>
   <span>辆</span>
</div>

script代码段

methods:{
    initData() {
      const num = 1234
      this.toOrderNum(num)
      this.setNumberTransform()
    },
// 设置文字滚动
    setNumberTransform() {
      const _this = this
      const numberItems = _this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderCarsNum.filter((item) => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
// 处理数字
    toOrderNum(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 5) {
        num = '0' + num // 如未满5位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length === 5) {
        // 订单数中加入逗号
        num = num.slice(0, 2) + num.slice(2, 5) + num.slice(5, 8)
        this.orderCarsNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 数字超过5位显示异常
        this.$message.warning('数字过大，显示异常，请联系客服')
      }
    },

}