玩转数字滚动插件——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 时显示。

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

---

【1】odometer