vue实现数字翻页动画

本文实例为大家分享了vue实现数字翻页动画的具体代码，供大家参考，具体内容如下一、看效果二、实现步骤1、新建翻页组件scrollNumber.vuetemplatedivclass=coun...

本文实例为大家分享了vue实现数字翻页动画的具体代码，供大家参考，具体内容如下

一、看效果

二、实现步骤

1、新建翻页组件scrollNumber.vue

<template>
  <div class="count-flop" :key="compKey">
    <div :class="item != '.' && item != ',' ?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
      <div v-if="item == ','" class="count-flopandroid-content">,</div>
      <div v-else-if="item == '.'" class="count-flop-content">.</div>
      <div v-else class="count-flop-content" :class="['rolling_' + item]">
        <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
      </div>
    </div>
    <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: [],
        numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        compKey: 0
      };
    },
    props: ["val","suffix"],
    watch: {
      val() {
        this.value = this.val.toString().split("");
        this.compKey += 1;
      }
    },
    created() {
      this.value = this.val.toString().split("");
    },
  };
</script>
<style scoped>
  .count-flop {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-family: Gotham;
    font-size: 48px;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .count-flop > div {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 100%;
  }

  .count-flop-box {
    margin-right: 6px;
    width: 34px;
    background-color: #20214d;
    height: 57px;
    line-height: 48px;
    border-radius: 4px;
  }

  .count-flop-point {
    margin-right: 5px;
    width: 10px;
  }

  .count-flop-content {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    animation-fill-mode: forwards !important;
  }
  .count-flop-unit {
    width: php68px;
    height: 50px;
    line-height: 50px;
    background-color: #20214d;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    align-items: center;
    letter-spacing: 0.1em;
    color: #FFFFFF;
  }
  .rolling_0 {
    animation: rolling_0 2.1s ease;
  }

  @keyframes rolling_0 {
    from {
      transform: translateY(-90%);
    }
    to {
      transform: translateY(0);
    }
  }

  .rolling_1 {
    animation: rolling_1 3s ease;
  }

  @keyframes rolling_1 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10%);
    }
  }

  .rolling_2 {
    animation: rolling_2 2.1s ease;
  }

  @keyframes rolling_2 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-20%);
    }
  }

  .rolling_3 {
    animation: rolling_3 3s ease;
  }

  @keyframes rolling_3 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-30%);
    }
  }

  .rolling_4 {
    animation: rolling_4 2.1s ease;
  }

  @keyframes rolling_4 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-40%);
    }
  }

  .rolling_5 {
    animation: rolling_5 3s ease;
  }

  @keyframes rolling_5 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-50%);
    }
  }

  .rolling_6 {
    animation: rolling_6 2.1s ease;
  }

  @keyframes rolling_6 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-60%);
    }
  }

  .rolling_7 {
    animation: rolling_7 3.1s ease;
  }

  @keyframes rolling_7 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-70%);
    }
  }

  .rolling_8 {
    animation: rolling_8 2.1s ease;
  }

  @keyframes rolling_8 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-80%);
    }
  }

  .rolling_9 {
    animation: rolling_9 3.6s ease;
  }

  @keyframes rolling_9 {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-90%);
    }
  }
</style>

2、在页面中引入组件

<template>
  <div class="select" style="font-size: 16px;">
   <ScrollNumber :val="formatNumber(val,2,1)"></ScrollNumber>
  </div>
</template>


<script>
import ScrollNumber from "./scrollNumber.vue";

export default {
 components: {
  ScrollNumber,
 },
 data() {
  return {
   val: 1632.1
  };
 },
 methods: {
  /**
  * formatNumber()
  * 将数值四舍五入后格式化.
  *
  * @param num 数值(Number或者String)
  * @param cent 要保留的小数位(Number)
  * @param isThousand 是否需要千分位 0:不需要, 1:需要(数值类型);
  * @return 格式的字符串,如'1,234,567.45'
  * @type String
  */
  formatNumber(num, cent, isThousand) {
   num = num.toString().replace(/\$|\,/g, "");
   if (isNaN(num)) num = "0";
   var sign = num == (num = Math.abs(num));
   num = parseFloat(num.toFixed(cent));
   num = num.toString();
   var cents;
   if (num.lastIndexOf(".") != -1) {
    let index = num.lastIndexOf(".");
    cents = num.substring(index + 1, num.length);
   } else {
    cents = "";
   }
   num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
   num = Math.floor(num / Math.pow(10, cent)).toString();
   if (isThousand) {
    for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
     num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
   }
   if (cent > 0) {
    if (cents == "") {
     return (sign ? "" : "-") + num;
    } else {
     return (sign ? "" : "-") + num + "." + cents;
    }
   } else {
    return (sign ? "" : "-") + num;
   }
  },
 },
 mounted() {
  setInterval(() => {
   this.val += 1
  }, 3000)
 }
}

</script>

<style lang="less" scoped>
.select {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 20px;
  height: 600px;
}
</style>

3、注意

1）formatNumber函数说明
封装一个数字函数，功能包含：千分位、保留小数、小数末尾抹零
2）用了一个定时函数，用来看翻页效果，可以自行调接口渲染数据

4、不足多进言

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。