Vue如何制作长尾词的数字翻页动画效果？

本文共计1000个文字，预计阅读时间需要4分钟。

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

一、看效果

二、实现步骤

1、新建翻页组件scrollNumber.vue

template

直接输出结果：

一、看效果

二、实现步骤

1、新建翻页组件scrollNumber.vue

template

本文实例为大家分享了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-flop-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: 68px;         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、不足多进言

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