1、官方地址:http://inorganik.github.io/countUp.js/

2、官方demo:

3、参数说明:

params——start(开始数字)、end(结束数字)、decimals(小数位数)、duration(持续时间)

options——useEasing(设置宽松)、useGrouping(是否使用千位分隔符)、separator(千位分隔符)、decimal(小数点分隔符)、prefix(前缀符)、suffix(后缀符,可以加单位)

methods——start(开始)、pause/resume(暂停/重新开始)、reset(重置)、update(更新到该值)

4、vue代码:

<i-count-up
:start="0"
:end="total"
:decimals="0"
:duration="2.5"
:options="options"
></i-count-up>
import ICountUp from 'vue-countup-v2'

export default {
name: 'dashboard',
data () {
return {
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
},
total: 100
}
}
}

Countup.js:vue-countup-v2(npm)数字滚动插件的更多相关文章

  1. vue-countTo---简单好用的一个数字滚动插件

    vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn. 你可以设置 startVal 和 endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-count ...

  2. jQuery 数字滚动插件

    这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...

  3. vue-count-to(简单好用的一个数字滚动插件)

    vue-count-to是一个无依赖,轻量级的vue组件,可覆盖easingFn. 1. 你可以设置两个属性startVal和endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-cou ...

  4. vue 实现 多个 数字滚动增加动效

    参考网上其他同学写的 具体出处忘了,不然一定贴上,有问题请联系. 图一是具体js代码:二是设置定时器:三是dom节点需要写ref numberGrow (ele) { this.summaryData ...

  5. 非常好用的vue数字滚动插件vue-countTo

    参考链接:https://blog.csdn.net/gaoxin666/article/details/84635056

  6. FullPage.js 活动单页 - 全屏滚动插件

    插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...

  7. 那些H5用到的技术(6)——数字滚动特效

    前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...

  8. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  9. Parallax.js – 自适应智能设备方向的视差效果插件

    Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...

随机推荐

  1. In-App Purchase Programming Guide----(八) ---- Preparing for App Review

    Preparing for App Review After you finish testing, you’re ready to submit your app for review. This ...

  2. Spring入门第十二课

    Bean的配置方法 通过工厂方法(静态工厂方法&实例工厂方法),FactoryBean 通过调用静态工厂方法创建Bean 调用静态工厂方法创建Bean是将对象创建的过程封装到静态方法中,当客户 ...

  3. setInterval(callbackfunc,time)中callbackfunc传参数问题

    var si=setInterval(callbackfunc,time)中callbackfunc传参数问题(循环执行) var st=setTimeout(callbackfunc,time);定 ...

  4. Centos7更新阿里yum源

    一.下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7.repo 二.备份并替换系统的repo文件 cp Centos-7.repo /etc/ ...

  5. 使用 Addr2line 将函数地址解析为函数名

    用 Addr2line 将函数地址解析为函数名 原文链接:http://www.ibm.com/developerworks/cn/linux/l-graphvis/ Addr2line 工具(它是标 ...

  6. FZU2216【二分】

    题意: 百度. 思路: 一个连续数组111222233344444555666的每一个起伏转折即需要一张万能牌. 然后二分一下得最长区间. #include<cstdio> #includ ...

  7. codevs1052 地鼠游戏

    1052 地鼠游戏 题目描述 Description 王钢是一名学习成绩优异的学生,在平时的学习中,他总能利用一切时间认真高效地学习,他不但学习刻苦,而且善于经常总结.完善自己的学习方法,所以他总能在 ...

  8. webpack 打包和手动创建一个vue的项目

    首先我们为啥要用webpack,为啥不用其他的打包的工具. 先听我捋捋, Webpack有人也称之为 模块打包机 ,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片. ...

  9. Luogu P1438无聊的序列【线段树/差分】By cellur925

    题目传送门 题目大意:维护一个序列,维护区间加等差数列,单点查询的操作. 首先我们肯定是要用线段树来维护了,按照一般的思维局限,我选择了维护序列中的值,但是区间修改的时候由于公差的存在,所以区间修改有 ...

  10. APP携参安装技术怎样帮助APP推广

    APP 如何自动实现携带参数安装?这是许多开发者感兴趣的问题,毕竟在 APP 开发的许多逻辑上常常不可避免的需要判断安装来源,比如:广告投放.用户邀请.用户行为.社交分享等 APP 推广环节,国内的 ...