介绍 & lt; template>
类& lt; p=皀umber-grow-warp"祝辞
& lt;跨越ref=皀umberGrow":data-time=皌ime"类=皀umber-grow":数据值=https://www.yisu.com/zixun/凹壑怠? 0
出口默认{
道具:{
时间:{
类型:数字,
默认值:2
},
价值:{
类型:数字,
默认值:720000
}
},
方法:{
numberGrow(避署){
让_this=这=(_this让一步。值* 10)/(_this。时间* 1000)
让电流=0
让=0开始
让t=setInterval(函数(){
+=一步开始
如果(开始> _this.value) {
clearInterval (t)
开始=_this.value
t=零
}
如果(当前===开始){
返回
}
当前=开始
避署。innerHTML=current.toString () .replace (/(d) (?=(?: d{3}[+] ?) +美元)/g, 1美元,)
},10)
}
},
安装(){
this.numberGrow(这一点。refs.numberGrow美元)
}
}> .number-grow-warp {
变换:translateZ (0);
}
.number-grow {
字体类型:Arial-BoldMT;
字体大小:64 px;
颜色:# ffaf00;
字母间距:2.67 px;
保证金:110 px 0 20 px;
显示:块;
行高:64 px;
} & lt; NumberGrow: https://www.yisu.com/zixun/value=" 720000 ">
这篇文章主要介绍了vue实现数字滚动增加效果的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下^ _ ^
数字滚动组件:
调用:
感谢你能够认真阅读完这篇文章,希望小编分享vue实现数字滚动增加效果的案例内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
