这篇文章主要为大家详细介绍了某视频剪辑软件实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
数字动态翻牌器
最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器
第一步创建一个组件页面，NumberCount.vue
思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码
模板
div class='chartNum '
div class='box-item '
里
: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
/李
/div
/div
/模板
脚本
导出默认值{
道具：{
//显示的数字
编号：{
类型：数量，
},
//显示的长度
长度：{
类型：数量，
},
},
data() {
返回{
orderNum: ['0 '，' 0 '，' 0 '，' 0']，//默认总数
};
},
已安装(){
setTimeout(()={
这个。toordernum(这个。号)；//这里输入数字即可调用
}, 500);
},
观察：{
编号：{
处理器(瓦尔){
这个。toordernum(val)；
},
深：真的，
},
},
方法：{
//设置文字滚动
setNumberTransform() {
const numberItems=this .$ refs.numberItem//拿到数字的裁判，计算元素数量
//eslint-disable-next-line no-restricted-globals
常数arr=this。订单编号。筛选器(item=！伊斯南(项));
console.log(numberItems.length，number arr)；
//结合半铸钢钢性铸铁(铸造半钢)对数字字符进行滚动，显示数量
对于(设索引=0;索引号项目。长度；index=1) {
const elem=项目数[index]；
elem。风格。transform=` translate(-50%，-$ { number arr[index]* 10 } %)`；
}
},
//处理总数字
toOrderNum(num) {
const numtext=num。tostring()；
如果(此长度){
if (numtext.length this.length) {
const numlist=` 0 $ { numtext }//如未满固定数，添加'0'补位
这个。toordernum(numlist)；//递归添加'0'补位
} else if(numtext。长度===数量。长度){
这个。ordernum=numtext。拆分(')；//将其便变成数据，渲染至滚动数组
}
}否则{
这个。ordernum=numtext。拆分(')；
}
//数字中加入逗号
//const length=numtext。长度/3；
//let count=" "；
//for(设I=0；我长度；i=1) {
//if (i===0) {
//count=`${numtext.slice(i，i 3)}，`；
//console.log(计数);
//}否则if (i===长度- 1) {
//count=numtext.slice(i * 3，I * 3 ^ 3)；
//console.log(计数);
//}其他{
//count=`${numtext.slice(i * 3，I * 3 ^ 3)}，`；
//console.log(计数);
//}
//}
//这个。ordernum=计数。拆分(')；
这个。设置数字转换()；
},
},
};
/脚本
样式范围的语言='scss '
/*总量滚动数字设置*/。盒子-项目{
位置：相对；
高度：34px
字体大小：20px
font-family:AzonixRegular；
颜色：# 021c25
行高：41px
文本对齐：居中；
列表样式：无；
书写模式：垂直-lr；
文本方向：直立；
}
/* 默认逗号设置*/。标记-项目{
宽度：28px
高度：34px
位置：相对；
/* 背景图片*/
背景：URL(' ~ @/assets/images/overview/BG-chart编号。SVG’)无重复中心
居中；
背景尺寸：100% 100%;
列表样式：无；
右边距：1px
跨度{
位置：绝对；
宽度：100%;
身高：100%;
底部：2px
左：20%;
字体大小：20px
书写模式：垂直-rl；
文本方向：直立；
}
}
/*滚动数字设置*/。编号-项目{
宽度：28px
高度：34px
/* 背景图片*/
背景：URL(' ~ @/assets/images/overview/BG-chart编号。SVG’)无重复中心
居中；
背景尺寸：100% 100%;
//后台：# ccc
列表样式：无；
右边距：1px
跨度{
位置：相对；
显示：内嵌-块；
右边距：10px
宽度：100%;
身高：100%;
书写模式：垂直-rl；
文本方向：直立；
溢出：隐藏；
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
我{
字体样式：正常；
位置：绝对；
top:8px；
左：50%;
transform: translate(-50%，0)；
转场：变换1s淡入淡出；
字母间距：10px
}
}
}。编号-项目：最后一个孩子{
右边距：0;
}
/风格
不加逗号：
加入逗号：
至于样式背景可以自定义
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。