大屏数字上下滚动插件
原理:让012345678竖向排列,显示数字时利用css
的translate
就能达到效果
若想显示9,则就 transform: translate(0, -90%);
Vue项目中完整代码:
<template>
<div class="numWrap">
<div class="box-item">
<div
:class="{ 'number-item': !Number.isNaN(+item), 'mark-item': Number.isNaN(+item) }"
v-for="(item, index) in numberString"
:key="index"
>
<div class="num-str" v-if="!isNaN(item)">
<ul ref="numberItem" class="num-ul">
<li class="num-li">0</li>
<li class="num-li">1</li>
<li class="num-li">2</li>
<li class="num-li">3</li>
<li class="num-li">4</li>
<li class="num-li">5</li>
<li class="num-li">6</li>
<li class="num-li">7</li>
<li class="num-li">8</li>
<li class="num-li">9</li>
</ul>
</div>
<div class="comma" v-else>{
{
item }}</div>
<