Countup.js:vue-countup-v2(npm)数字滚动插件
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)数字滚动插件的更多相关文章
- vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn. 你可以设置 startVal 和 endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-count ...
- jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...
- vue-count-to(简单好用的一个数字滚动插件)
vue-count-to是一个无依赖,轻量级的vue组件,可覆盖easingFn. 1. 你可以设置两个属性startVal和endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-cou ...
- vue 实现 多个 数字滚动增加动效
参考网上其他同学写的 具体出处忘了,不然一定贴上,有问题请联系. 图一是具体js代码:二是设置定时器:三是dom节点需要写ref numberGrow (ele) { this.summaryData ...
- 非常好用的vue数字滚动插件vue-countTo
参考链接:https://blog.csdn.net/gaoxin666/article/details/84635056
- FullPage.js 活动单页 - 全屏滚动插件
插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...
- 那些H5用到的技术(6)——数字滚动特效
前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...
- jquery轻量级数字动画插件jquery.countup.js
插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js ...
- Parallax.js – 自适应智能设备方向的视差效果插件
Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...
随机推荐
- CodeForces 1131G. Most Dangerous Shark
题目简述:从左到右依次有$n \leq 10^7$个Domino骨牌,高度为$h_i$,手动推倒他的花费为$c_i$.每个骨牌之间的距离为$1$.一个骨牌可以被向左或者向右推倒.当第$i$个骨牌被推倒 ...
- emacs for OCaml
(require 'cl) (require 'package) (add-to-list 'package-archives '("melpa" . "https:// ...
- [翻译]Nativescript 中 Web 视图与 Android/IOS 的双向通信
English document From http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communi ...
- C# 生成word 文档 代码 外加 IIS报错解决方案
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- SQL Server等待事件新解
资源等待类型 并行:CXPACKET Buffer:PAGEIOLATCH_X 非Buffer:LATCH_X I/O:ASYNC_IO_COMPITION:IO_COMPITION CPU:SOS_ ...
- [51nod] 1289 大鱼吃小鱼 堆栈-模拟
有N条鱼每条鱼的位置及大小均不同,他们沿着X轴游动,有的向左,有的向右.游动的速度是一样的,两条鱼相遇大鱼会吃掉小鱼.从左到右给出每条鱼的大小和游动的方向(0表示向左,1表示向右).问足够长的时间之后 ...
- CentOS 安装配置vncserver
yum 安装tiger vncserver yum install tigervnc-server 安装后输入 vncserver 设置密码 3.配置用户 vim /etc/sysconfig/vnc ...
- elasticsearch学习(三):分布式
es的分布式思想跟现在流行的很多开发技术的分布式一个道理.一个es 搜索服务作为一个集群,集群中存在很多节点,一个节点就是一个搜索服务器.这么多节点中,会按照一定的机制推举出一个 master节点,该 ...
- 洛谷P2134 百日旅行
P2134 百日旅行 题目背景 重要的不是去哪里,而是和你在一起.——小红 对小明和小红来说,2014年7月29日是一个美好的日子.这一天是他们相识100天的纪念日. (小明:小红,感谢你2场大考时默 ...
- 内置对象(Math对象、Date对象、Array对象、String对象)常用属性和方法
Math对象 Math 是一个内置对象, 它具有数学常数和函数的属性和方法.不是一个函数对象. 与其它全局对象不同的是, Math 不是一个构造函数. Math 的所有属性和方法都是静态的. 跟数学 ...