vue实现数字翻页动画
本文实例为大家分享了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、不足多进言
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)