vue 实现数字滚动增加效果的实例代码


Posted in Javascript onJuly 06, 2018

项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,贴出来分享一下 ^_^

数字滚动组件:

<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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 #Javascript
javascript显示动态时间的方法汇总
Jul 06 #Javascript
Django+Vue跨域环境配置详解
Jul 06 #Javascript
微信小程序画布圆形进度条显示效果
Nov 17 #Javascript
微信小程序实时聊天WebSocket
Jul 05 #Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 #Javascript
基于vue展开收起动画的示例代码
Jul 05 #Javascript
You might like
PHP学习之PHP运算符
2006/10/09 PHP
PHP的开发框架的现状和展望
2007/03/16 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
js压缩利器
2007/02/20 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
Node.js文件操作详解
2014/08/16 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python中join()方法介绍
2018/10/11 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
社区十八大感言
2014/01/19 职场文书
捐资助学倡议书
2014/04/15 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
党员民主评议总结
2014/10/20 职场文书