玩转数字滚动插件——odometer

odometer 插件是不支持小数位显示的。列如传入 value: 0.16，显示的是 0；传入 value: 16.5，显示的是 16。

现需要用 odometer 插件的数字滚动效果，来显示一款 APP 的用户在线率，显示结果要保留 2 位小数。如：后台返回的值是 0.1614，前端显示为 16.14%；后台返回的值是 0.0014，前端显示为 0.14%。

• 显示小数位：
  由于 odometer 插件只支持整数显示，将后台返回值乘以 10000，再设置显示格式为 format: '(ddd).dd'。

  例如：后台返回 0.1614， 令 value = 0.1614 * 10000，并设置显示格式为 format: '(ddd).dd'，显示结果就是 16.14。

• 显示零点几的小数：
  例如：后台返回 0.0014，令 value = 0.0014 * 10000 + 1000，设置显示格式为 format: '(ddd).dd'，此时显示结果为 10.14。

  隐藏掉首位的数字 1
  

  

.iodometer .odometer-digit:first-child{
   display: none;
}

.

综合两种情况需要设置 2 个 odometer，分别在 value 值大于等于 0.001 时显示，和 value 值小于 0.001 时显示。

<template>

  <odometer id="moreOne" v-if="resValue >= 0.001"
  :value="dealNum(resValue)" :format="'(ddd.dd)'"/>

  <odometer id="lessOne" v-if="resValue < 0.001"
  :value="dealNum(resValue)" :format="'(ddd.dd)'"/>

</template>

<script>
  dealNum (num) {
    if (num < 0.001) {
      return num * 10000 + 1000;
    } else if (num < 0.001) {
      return num * 10000;
    } else {
      return 0;
    }
  }
</script>

<style>
  #lessOne.iodometer .odometer-digit:first-child{
     display: none;
  }

/*显示百分号*/
.iodometer .odometer-digit:last-child{
   .odometer-inside::after {
       content: '%';
       font-size: px2rem(20);
       position: relative;
       right: px2rem(0);
       bottom: px2rem(-10);
       color: #c2c4c8;
   }
}
</style>

由于是通过 v-if 来切换显示，数值从 小于 0.001 过渡到 大于等于 0.001，显示效果不太好。

---

【1】odometer