vue实现数字动态翻牌器

最近项目里使用到了数字翻牌器，找了半天根据素材自己改了一个，动态的翻牌器

第一步创建一个组件页面，

思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码

<template> <div class="chartNum"> <div class="box-item"> <li:class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"v-for="(item, index) in orderNum":key="index"> <span v-if="!isNaN(item)"> <i ref="numberItem">0123456789</i> </span><span class="comma" v-else>{{ item }}</span> </li> </div> </div>
</template>

<script>
export default {props: {// 显示的数字number: {type: Number,}, // 显示的长度length: {type: Number,},},data() {return {orderNum: ["0", "0", "0", "0", "0", "0", "0", "0"], // 默认总数};},mounted() {setTimeout(() => {this.toOrderNum(777777); // 这里输入数字即可调用}, 500);},watch: {number: {handler(val) {this.toOrderNum(val);},deep: true,},},methods: {// 设置文字滚动setNumberTransform() {const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量 // eslint-disable-next-line no-restricted-globalsconst numberArr = this.orderNum.filter((item) => !isNaN(item));console.log(numberItems.length, numberArr); // 结合CSS 对数字字符进行滚动,显示数量for (let index = 0; index < numberItems.length; index += 1) {const elem = numberItems[index];elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;}}, // 处理总数字toOrderNum(num) {const numtext = num.toString();if (this.length) {if (numtext.length < this.length) {const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位this.toOrderNum(numlist); // 递归添加"0"补位} else if (numtext.length === num.length) {this.orderNum = numtext.split(""); // 将其便变成数据，渲染至滚动数组}} else {this.orderNum = numtext.split("");} // 数字中加入逗号 // const length = numtext.length / 3; // let count = ''; // for (let i = 0; i < length; i += 1) { //   if (i === 0) { //     count += `${numtext.slice(i, i + 3)},`; //     console.log(count); //   } else if (i === length - 1) { //     count += numtext.slice(i * 3, i * 3 + 3); //     console.log(count); //   } else { //     count += `${numtext.slice(i * 3, i * 3 + 3)},`; //     console.log(count); //   } // } // this.orderNum = count.split('');this.setNumberTransform();},},
};
</script>

<style scoped lang="scss">
/*总量滚动数字设置*/
.box-item {position: relative;height: 34px;font-size: 20px;font-family: AzonixRegular;color: #021c25;line-height: 41px;text-align: center;list-style: none;writing-mode: vertical-lr;text-orientation: upright;
}
/* 默认逗号设置 */
.mark-item {width: 28px;height: 34px;position: relative;/* 背景图片 */background: url('../../assets/img/shuziluang@2x.png') no-repeat centercenter;background-size: 100% 100%;list-style: none;margin-right: 1px;& > span {position: absolute;width: 100%;height: 100%;bottom: 2px;left: 20%;font-size: 20px;writing-mode: vertical-rl;text-orientation: upright;}
}
/*滚动数字设置*/
.number-item {width: 28px;height: 34px;/* 背景图片 */background: url('../../assets/img/shuziluang@2x.png') no-repeat centercenter;background-size: 100% 100%;// background: #ccc;list-style: none;margin-right: 1px;& > span {position: relative;display: inline-block;margin-right: 10px;width: 100%;height: 100%;writing-mode: vertical-rl;text-orientation: upright;overflow: hidden;display: flex;align-items: center;justify-content: center;& > i {font-style: normal;position: absolute;top: 8px;left: 50%;transform: translate(-50%, 0);transition: transform 1s ease-in-out;letter-spacing: 10px;}}
}
.number-item:last-child {margin-right: 0;
}
</style>

vue实现数字动态翻牌器相关推荐

vue数字滚动翻牌器效果
直接复制粘贴就可以使用源代码: <!DOCTYPE html> <html lang="en"><head><meta charset= ...
Vue大屏实战一：数字翻牌器的实现
文章目录 1.效果预览 2.数字翻牌器的实现 3.vue项目中引入DataV 4.大屏顶部翻牌器布局 5.大屏数字翻牌器样式 6.大屏数字翻牌器逻辑实现 1.效果预览页面整体效果如下顶部的数字翻牌 ...
封装vue版数字翻牌器
封装vue版数字翻牌器 <template> <div class="number"> <ul id="dataNums"> ...
基于vue3 + ts 开发的数字翻牌器组件
写了两个组件,一个是DigitalFlop.vue,一个是DigitalItem.vue DigitalFlop.vue 的代码如下: <template><div class=&q ...
大数据可视化——dataV，Echarts，蚂蚁金服L7世界地图引入，数字翻牌器，全屏，自定义排名轮播表
目录 L7相关概念构造函数Scene PointLayer 基本用法 shape 类型 style tips 地图事件 Popup信息框 option 方法:setLnglat 方法:setDOMC ...
【前端3分钟】写一个数字翻牌器
在做效果的时候,想要表现一个数字数据的动态变化,例如金额增加,此时我们就可以使用数字翻牌器来表现.当然,你也可以使用其他效果来表现. 下面我们就来实现,注意一点: 数字的增加 <!DOCTYPE ...
DataV 数字翻牌器组件 dv-digital-flop 数字0不显示问题解决
问题: 在项目上线时我们会为了减少项目体积选择使用cdn链接将项目中用到的组件插件从打包的结构中剔除,在最近的项目中发现 DataV组件库出现了问题,使用cdn链接时出现,数字翻牌器组件当confi ...
大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
vue 翻牌器记录下
//组件 //思路:大概就是显示几位数,然后从0开始滚动到当前的数值的位置,在每一个位置都有0-9的数,然后就是往上滚动当前数值的次数到当前的数,话不多说上代码<template> < ...

vue实现数字动态翻牌器

vue实现数字动态翻牌器相关推荐

最新文章

热门文章