数字滚动效果（插件）实现——VUE + 原生

        平时在工作中可能会遇到实现数字滚动效果，作者将个人用到过得几个插件和实现方法进行了整理，有简便的vue插件，也有原生的应用，仅供参考（也可应用于 大屏项目）。

VUE 插件

一、vue-count-to

        vue-count-to是一个无依赖，轻量级的vue组件，可以设置 startVal 和 endVal，自行覆盖easing、Fn，自动判断计数或倒计时等。

1. 使用方法

安装使用：npm install vue-count-to

使用代码：
<template>
  <count-to :startVal='startVal' :endVal='endVal' :duration='3000'></count-to>
</template>
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { CountTo },
    data () {
      return {
        startVal: 0,
        endVal: 2020
      }
    }
  }
</script>

2. 选项配置

Property	Description	type	default
startVal	开始值	Number	0
endVal	结束值	Number	2020
duration	持续时间，以毫秒为单位	Number	3000
autoplay	自动播放	Boolean	true
decimals	要显示的小数位数	Number	0
decimal	十进制分割	Number	*
separator	分隔符	String	*
prefix	前缀	String	*
suffix	后缀	String	*
useEasing	使用缓和功能	Boolean	true
easingFn	缓和回调	Function	*
mountedCallback	挂载以后返回回调	Function	*
start	开始计数	Function	*
pause	暂停计数	Function	*
reset	重置countTo	Function	*

二、vue-animate-number

1. 使用方法

安装使用：npm install vue-animate-number

使用代码：
<template>
  <animate-number from="0" to="10000" duration="3000"  :formatter="formatter"></animate-number>
  <!--  或  -->
  <animated-number :value="showValue" 
  		:formatValue="formatter" :duration="showValueTime">
  </animated-number>
</template>
<script>
 import AnimatedNumber from "animated-number-vue"
  export default {
    components: { AnimatedNumber },
    data () {
      return {
        showValue: 10000,
        showValueTime: 3000
      }
    },
    methods: {
	  formatter(value) {
         // toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
         return ` ${value.toFixed(2)}`;
	  },
	}
  }
</script>

2. 选项配置

Property	Description	type	default
value (required)	number that will be animated	Number, String	10000
duration (optional)	the duration of animation	Number	3000
round (optional)	remove decimals by rounding the value	Number	*
delay (optional)	the delay of animation	Number	*
easing (optional)	you can found all valid values here	Number	*
formatValue	A function that will manipulate the animated value	Function	*

原生写法

注：以下仅提供作者的具体代码，实际项目中以个人需求为主，自行调整。

1. HTML部分

<div class="total-area">
    <span class="area-name">管辖总面积</span>
    <span id="areaNumber" class="area-number"></span>
    <span class="area-unit">km²</span>
</div>

2. CSS部分（less写法）

.total-area {
      display: flex;
      flex-direction: row;
      color: #fff;
      font-size: 0.285rem;
      cursor: pointer;
      z-index: 100;
      .area-name {
          line-height: 0.6rem;
          margin-right: 0.125rem;
      }
      .area-number {
          position: relative;
          font-size: 0.4875rem;
          text-align: center;
          color: #fff;
          writing-mode: vertical-lr;
          text-orientation: upright;
          /*文字禁止编辑*/
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
          /*滚动数字设置*/
          .number-item {
              width: 0.475rem;
              height: 0.6rem;
              list-style: none;
              margin-right: 0.125rem;
              background: #ffa529;
              border-radius: 0.05rem;
              border: 1px solid #ffa529;
              & > span {
                  position: relative;
                  display: inline-block;
                  margin-right: 0.075rem;
                  width: 100%;
                  height: 100%;
                  writing-mode: vertical-rl;
                  text-orientation: upright;
                  overflow: hidden;
                  & > i {
                      font-style: normal;
                      position: absolute;
                      top: 0.025rem;
                      left: 50%;
                      transform: translate(-50%, 0);
                      transition: transform 1s ease-in-out;
                      letter-spacing: 0.125rem;
                  }
              }
          }
      }
      .area-unit {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          font-size: 0.275rem;
      }
  }

4. JS部分

// 创建渲染数字DOM元素
function createDom(){
    let orderNum = ["0", "0", "0", "0"];
    let str = '';
    for (let i = 0; i < orderNum.length; i++) {
        if (!isNaN(orderNum[i])) {
            str += '<li class="number-item">' + 
            '<span><i class="numberItem">0123456789</i></span>' + 
            '</li>'
        } else {
            str += '<li>' + 
            '<span class="comma">' + orderNum[i] +'</span>' + 
            '</li>'
        }
    }
    document.getElementById("areaNumber").innerHTML = str;
    setTimeout(function(){
        initDigitalScroll(1079);
    }, 400)
}
// 数字格式化处理
function initDigitalScroll(num) {
    num = num.toString();
    // 把数字变成字符串
    if (num.length < 4) {
        num = "0" + num; // 如未满四位数，添加"0"补位
        initDigitalScroll(num); // 递归添加"0"补位
    } else if (num.length === 4) {
        orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
    }
    setNumberTransform(orderNum);
}
// 结合CSS 对数字字符进行滚动,显示数量
function setNumberTransform(orderNum) {
    const numberItems = document.getElementsByClassName("numberItem"); // 计算元素数量
    const numberArr = orderNum.filter(item => !isNaN(item));
    for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
    }
}