vue寫數字翻牌效果_封裝vue版數字翻牌器
阿新 • • 發佈：2021-02-09
技術標籤：vue寫數字翻牌效果
{{item2}}
js部分
export default { props:{ number:Number }, data(){ return{ list:[], numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, '.'] } }, mounted(){ this.scroll(); }, methods:{ scroll(){ this.list=this.number.toString().split(''); let arr=[]; this.list.forEach((value) => { arr.push({ num:value, top:0 }) }); this.list=arr; let Hei=parseFloat(getComputedStyle(document.getElementById("dataNums")).height); this.list.forEach((value,index) => { setTimeout(()=>{ value.top=parseFloat((value.num*Hei)+(Hei*10)); },index*300); }); } } }
css樣式
.number { margin-bottom: 10px; text-align: center; ul { display: inline-block; height: 40px; text-align: center; li { float: left; width: 40px; height: 40px; text-align: center; margin: 0 4px; background: url("../assets/images/yuyueshf/number.png") no-repeat center;//背景圖 background-size: 100% 100%; .dataBoc { position: relative; width: 100%; height: 100%; overflow: hidden; .tt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; span{ width: 100%; height: 100%; line-height: 40px; float: left; text-align: center; font-size: 26px; color: #f64841; } } } } } }