vue實(shí)現(xiàn)數(shù)字滾動效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)數(shù)字滾動的具體代碼,供大家參考,具體內(nèi)容如下
<template> <div class='num-block'> <div class='num-block_show'> <div : v-for='(item, key) in numbers' :key='key'> <!-- <ul : v-if='isNum(item)'> --> <ul : v-if='isNum(item)'> <!-- <li v-for='(opt, index) in noNumbers(item, key)' :key='index'> {{ opt }} </li> --> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <div v-else>,</div> </div> </div> <!-- <div style='position:absolute;top:250px;left:0'> {{ this.numbers }} </div> --> </div></template><script> export default { name: 'ws-num-block', props: [’data’], data() { return { currentData: ’10’, lastData: ’10’ } }, computed: { numbers() { let data = this.data; if(!data) { return } data = this.dealData(data); return data; } }, watch: { data(val){ let lastData = this.currentData; this.currentData = this.dealData(val); this.lastData = lastData; } }, methods: { noNumbers(item, key) { let lastData = this.lastData; let lastItem = this.lastData[key]; let result = []; lastItem = lastItem ? lastItem : ’0’; if(lastItem != item) { if(lastItem == ’,’ || item == ’,’) { result.push(item); return result; }else { let meal = 0; if(Number(item) < Number(lastItem)) { meal = Number(item) + 10 - Number(lastItem); }else { meal = Number(item) - Number(lastItem); } for(let i=0;i<meal+1;i++) { if(Number(lastItem) > 9) {lastItem = 0; } result.push(lastItem.toString()); lastItem++; } return result; } }else { result.push(item); return result; } }, // ulStyles(arr) { ulStyles(item, key) { // if(!arr) { // return // } let top = 0; // let currentTop = -26 * Number(arr.length-1); let currentTop = -30 * Number(item); top = currentTop + ’px’; // top = 0; return { ’position’: ’absolute’, ’left’: 0, ’top’: top, ’width’: ’12px’, ’list-style’: ’none’, ’padding’: ’0’, ’margin’: ’0’, ’transition’: ’1s’ } }, isNum(val) { return val == ’,’ ? false : true }, dealData(val) { let vals = val.toString().split(’’).reverse(); let dealData = []; for(let i=0;i<vals.length;i++) { if( i > 0 && i%3 == 0 ) { dealData.push(’,’); } dealData.push(vals[i]); } dealData = dealData.reverse().join(’’); return dealData; } } };</script><style lang='sass'> .num-block width: 100% height: auto &_show display: flex justify-content: center height: 30px overflow: hidden &_numbers position: relative width: 14px &_numbers.ellipsis width: 6px &_ul>li height: 30px line-height: 30px &_ellipsis position: absolute left: 0 top: 0 width: 6px</style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. JS中6個(gè)對象數(shù)組去重的方法2. 一文帶你徹底理解Java序列化和反序列化3. python中文本字符處理的簡單方法記錄4. 資深程序員:給Python軟件開發(fā)測試的25個(gè)忠告!5. Python使用Selenium自動進(jìn)行百度搜索的實(shí)現(xiàn)6. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能7. Java commons-httpclient如果實(shí)現(xiàn)get及post請求8. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法9. Python基于requests庫爬取網(wǎng)站信息10. PHP利用curl發(fā)送HTTP請求的實(shí)例代碼

網(wǎng)公網(wǎng)安備