數(shù)字滾動(dòng)變化效果組件

效果

預(yù)覽

體驗(yàn)地址

用途

• 大屏展示，數(shù)字滾動(dòng)效果

實(shí)現(xiàn)

使用js控制元素移動(dòng)。
關(guān)鍵代碼如下：

//修改 chang(oldVal,newVal,id){if(oldVal >= newVal) return;let stepTime = this.stepTime;let time = Math.ceil((newVal - oldVal) / this.fontSize);time = stepTime / time;const dom = document.getElementById(id);// console.log(oldVal,newVal,id,dom);// console.log('time',time);oldVal += 0.5;if(oldVal >= 20){oldVal %= 20;newVal %= 20;}if(oldVal >= 10){oldVal %= 10;newVal %= 10;if(newVal < oldVal) newVal += 10;}dom.style.bottom = oldVal * this.fontSize + 'rem';setTimeout(()=>{this.chang(oldVal,newVal,id);},time); }, //數(shù)據(jù)變化時(shí)觸發(fā)，處理變化后的數(shù)據(jù) numRolling(newVal,oldVal){this.oldVal = newVal;oldVal = parseFloat(oldVal).toFixed(this.fixNum).toString().split('');newVal = parseFloat(newVal).toFixed(this.fixNum).toString().split('');let headNum = this.headNum;//數(shù)位發(fā)生變化，前面補(bǔ)零while(oldVal.length < newVal.length){oldVal.unshift('0');headNum--;document.getElementById('num-content'+headNum).parentNode.style.display = 'flex';}//修改前置位標(biāo)記數(shù)this.headNum = headNum;for(let i = 0; i < newVal.length; i++){let num = parseInt(newVal[i]);if(num >= 0 && num <= 9 ){let oldV = parseFloat(oldVal[i]),newV = parseFloat(newVal[i]);if(oldV > newV) newV += 10;this.chang(oldV,newV,'num-content'+(i + headNum));}} }

npm引入

組件以上傳到npm，可以直接install使用

1.安裝

npm i @jyeontu/jvuewheel -S

2.引入

//引入組件庫 import jvuewheel from '@jyeontu/jvuewheel' //引入樣式 import '@jyeontu/jvuewheel/lib/jvuewhell.css' Vue.use(jvuewheel);

3.vue中引用組件

<j-num-rolling :nums = "nums" :fixNum = "2" :stepTime = "200" :refreshTime = "2" :fontSize = "4" :numStyle = "numStyle"> </j-num-rolling>

資源地址

組件文檔

文檔地址：http://120.79.163.94/JYeontuComponents/#/homePage

代碼地址

Gitee：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse

總結(jié)

以上是生活随笔為你收集整理的vue数字滚动效果组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。