脚本宝典收集整理的这篇文章主要介绍了vue如何实现数字滚动增加效果?代码示例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^
数字滚动组件:
<template> <p class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </p> </template> <script> export default { PRops: { time: { tyPE: Number, default: 2 }, value: { type: Number, default: 720000 } }, methods: { numberGrow (ele) { let _this = this let step = (_this.value * 10) / (_this.time * 1000) let current = 0 let start = 0 let t = setInterval(function () { start += step if (start > _this.value) { clearInterval(t) start = _this.value t = null } if (current === start) { return } current = start ele.innerHTML = current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g, '$1,') }, 10) } }, mounted () { this.numberGrow(this.$refs.numberGrow) } } </script> <style> .number-grow-warp{ transform: translateZ(0); } .number-grow { font-family: Arial-BoldMT; font-@R_512_1191@ 64px; color: #ffaf00; letter-spacing: 2.67px; margin:110px 0 20px; display: block; line-height:64px; } </style>
调用:
<NumberGrow :value="720000"></NumberGrow>
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程入门!!
以上就是vue如何实现数字滚动增加效果?代码示例的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue如何实现数字滚动增加效果?代码示例全部内容,希望文章能够帮你解决vue如何实现数字滚动增加效果?代码示例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。