vue.js如何实现数字滚动增加效果?代码示例
5038
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^
数字滚动组件:
- <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-size: 64px;
- color: #ffaf00;
- letter-spacing: 2.67px;
- margin:110px 0 20px;
- display: block;
- line-height:64px;
- }
- </style>
调用:
- <NumberGrow :value="720000"></NumberGrow>
本文网址:https://www.zztuku.com/detail-8596.html
站长图库 - vue.js如何实现数字滚动增加效果?代码示例
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!