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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容