今天小编给大家分享一下怎么用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" >
<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）用了一个定时函数，用来看翻页效果，可以自行调接口渲染数据