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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
JS实现简单的表格增删
Jan 16 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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 错误之引号中使用变量
2009/05/04 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JS 统计时间
2021/03/09 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
python聊天程序实例代码分享
2013/11/18 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python的面向对象思想分析
2015/01/14 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python爬虫请求头设置代码
2020/07/28 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
我的大学生活演讲稿
2014/04/25 职场文书
项目建议书怎么写
2014/05/15 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
2014年纪委工作总结
2014/12/05 职场文书
入党团支部推荐意见
2015/06/02 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技