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. POJ-3050

    Hopscotch Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4385   Accepted: 2924 Descrip ...

  2. js的prototype的详解(1)

    一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功 ...

  3. js基础(补10.10)

    1.内嵌式: <html> <head> <title></title> </head> <body> <a href=& ...

  4. ZOJ 1586 QS Network Kruskal求最小生成树

    QS Network Sunny Cup 2003 - Preliminary Round April 20th, 12:00 - 17:00 Problem E: QS Network In the ...

  5. 如何获取AppStore上应用的ipa安装包

    1.首先你得去下载一个Apple Configurator 2,我们通过这个工具来获取ipa包,从AppStore上下载安装你需要获取的App 2.连接手机,打开Apple Configurator ...

  6. 杭电1003_Max Sum

    这是原题的链接http://acm.hdu.edu.cn/showproblem.php?pid=1003 起初我是利用暴力的方法,求出所有序列的和的情况,每取一个序列就和以知道的最大和作对比,取大者 ...

  7. 2017-9-20 NOIP模拟赛

    A 约数之和 (count.pas/c/cpp)TL:1S ML:128MB[Description]我们用 D(x)表示正整数 x 的约数的个数.给定一个正整数 N,求 D(1)+D(2)+…+D( ...

  8. 2017-8-31 NOIP模拟赛

    可接受序列 [题目描述] 让计算机这样读入一列非负整数: 1.读入数T. 2.接着往下读入T个数. 3.如果数列读完了,则停止,否则,转到1. 但是,往往会出现这样的问题:执行第2步时,数列已经没有T ...

  9. uoj#400. 【CTSC2018】暴力写挂(边分治)

    传送门 做一道题学一堆东西.jpg 猫老师的题--暴力拿的分好像比打挂的正解多很多啊--我纯暴力+部分分已经能有80了--正解没调对之前一直只有10分→_→ 先说一下什么是边分治.这个其实类似于点分治 ...

  10. 洛谷P3646 [APIO2015]巴厘岛的雕塑(数位dp)

    传送门 话说莫非所有位运算都可以用贪心解决么……太珂怕啦…… 一直把或运算看成异或算我傻逼…… 考虑从高位到低位贪心,如果能使答案第$i$位为0那么肯定比不为$0$更优 然后考虑第$i$位是否能为$0 ...