vue 实现数字滚动增加效果的实例代码
2018-07-06 09:19
1471 查看
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^
数字滚动组件:
<template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </div> </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-size: 64px; color: #ffaf00; letter-spacing: 2.67px; margin:110px 0 20px; display: block; line-height:64px; } </style>
调用:
<NumberGrow :value="720000"></NumberGrow>
总结
以上所述是小编给大家介绍的vue 实现数字滚动增加效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- javascript实现滚动效果的数字时钟实例
- vue实现图片滚动的示例代码(类似走马灯效果)
- JQuery实现数字滚动增加的效果
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- 利用JavaScript实现新闻滚动效果(实例代码)
- vue实现消息的无缝滚动效果的示例代码
- js实现单行文本向上滚动效果实例代码
- javascript实现滚动效果的数字时钟实例
- 利用JavaScript实现新闻滚动效果(实例代码)
- Vue实现侧边菜单栏手风琴效果实例代码
- jQuery实现自动左右滚动效果的代码实例
- vue+ElementUI实现订单页动态添加产品数据效果实例代码
- vue实现表格增删改查效果的实例代码
- js实现单行文本向上滚动效果实例代码
- JS小功能(offsetLeft实现图片滚动效果)实例代码
- JQuery实现数字滚动增加的效果
- JS 实现倒计时数字时钟效果【附实例代码】
- vue+swiper实现组件化开发的实例代码
- JavaScript中实现无缝滚动、分享到侧边栏实例代码
- 一个简单的滚动数字的效果实现