vue-countTo---简单好用的一个数字滚动插件
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。
你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;
安装使用:
<div class="cnblogs_code">
<pre>npm install vue-count-to</pre>
</div>
例子:
<template><countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template><script>import countTo from 'vue-count-to';export default {components: { countTo },data () {return {startVal: 0,endVal: 2017}}}
</script>
使用CDN脚本: demo
选项
Property | Description | type | default |
---|---|---|---|
startVal | 开始值 | Number | 0 |
endVal | 结束值 | Number | 2017 |
duration | 持续时间,以毫秒为单位 | Number | 3000 |
autoplay | 自动播放 | Boolean | true |
decimals | 要显示的小数位数 | Number | 0 |
decimal | 十进制分割 | String | . |
separator | 分隔符 | String | , |
prefix | 前缀 | String | '' |
suffix | 后缀 | String | '' |
useEasing | 使用缓和功能 | Boolean | true |
easingFn | 缓和回调 | Function | — |
** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**
功能
Function Name | Description |
---|---|
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset |
重置countTo |
更多例子:demo
vue-countTo---简单好用的一个数字滚动插件相关推荐
- vue大屏(驾驶舱)实现数字滚动
一.简单好用的数字滚动插件 vue-count-to 安装依赖 npm install vue-count-to 组件中使用 <template><countTo :startVal ...
- vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和 鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽 这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
- 数字滚动插件——CountUp.js
CountUp.js数字滚动插件使用方法详解 CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: http://inorganik. ...
- Vue中使用vue-count-to(数字滚动插件)
1. 简单介绍 npm官网:vue-count-to vue-count-to 就是一个组件插件,咱们引入进来,可以去打印一下,它就是一个组件实例,使用components注册一下,就可以在模板中使用 ...
- php抽奖的数字滚动器,jQuery数字滚动插件
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: jQuery数字滚动效果,可调整不同位数 使用方法 导入index.js html js调用$("#da ...
- CSS3简单实现,数字滚动效果
之前项目要做一个数字滚动效果. 因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为0也滚动,用css+jq写了一下. 首先每一个数字拆成单个数字. 我这边9个数字,根据自己需要添加. /* ...
- h5 数字变化_那些H5用到的技术(6)——数字滚动特效
前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了呢? 这个效果我是在开源中国上找到的 http ...
- 初级开发者福音:手把手教你实现数字滚动效果~
文章目录 一.前言 二.背景知识 三.实现方案 Step 1:分析需求 Step 2:实现单个数字的滚动效果 Step 3:组件接口设计 Step 4:完善组件 一.前言 前端数字滚动显示的场景很多, ...
- 数字滚动组件(react)
基于react实现一个数字滚动组件(vue也一样,逻辑相同) 直接上代码 1.number-roll.tsx interface NumberRollProps {value: number; } c ...
- jquery 数字滚动特效 数字自增特效 数字位数动态适应
最近做了个大项目,需要在首页动画显示实时统计数据,虽然百度了不少jquery特效,但有的需要积分,有的功能不全面,下面我将源码分享出来. html <!DOCTYPE html> < ...
最新文章
- 干货丨 一文概览深度学习中的激活函数
- 利用Python绘制 3D 体素色温图
- [转载]Eclipse.ini的相关说明
- 用函数计算工龄_还在加班熬夜求年龄,算工龄,学会这招让你分分钟钟搞定这些!...
- [转]被当做狗和鸡来驱赶的百姓
- kafka 集群_kafka 集群及原理
- javascript Date object
- 吴恩达机器学习logistic回归作业(python实现)
- 指针用作函数参数、指针型函数和函数指针
- 小米盒子服务器无信号,小米小盒子连接HDMI无信号怎么办?
- 主流浏览器发展史及其内核初探
- 微信小程序评论的实现
- 垃圾分类的正确姿势?用 OpenCV 人工智能图像识别技术来进行
- graphics.h头文件图形绘画详解(史上最详细)
- 怎么把图片压缩到200K以内?如何在线压缩图片大小?
- radis安装和使用
- java 第三方登录之QQ登录
- 【深一点学习】BP网络,结合数学推导的代码实现
- PHP友情链接检测,www.jsphp.net友情链接查询结果 - 站长工具
- 《软件功能测试自动化实战教程》—第6章6.3节参数化测试