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> < ...
最新文章
- 自定义apt升级脚本
- 【ACM】杭电OJ 2028
- linux下如何将mysql加入环境变量
- 图像亮度、对比度调节(伽马校正)
- 批量删除java注释_怎样批量去掉java文件中的注释
- VS2008 Web Application和Web Site的区别_转载
- 前腾讯游戏产品经理舒展:「觉」是产品最重要的维度
- 通过视频着色进行自监督跟踪
- 8086PC读取和执行指令相关部件
- .NET Core 使用Topshelf方式创建Windows服务
- mysql binlog oplog_mongodb 学习之oplog
- rocketmq 消息 自定义_跟我学RocketMQ[1-4]之消息消费及支持spring
- [shell] IT运维之Linux服务器监控方案
- ezcad旋转轴标刻参数_激光打标机软件ezcad中菜单下的旋转角度标刻功能介绍及其操作设置...
- 项目管理如何真正实现降本增效?
- -转载-我要我们在一起故事原著
- linux ps1 日期格式,Linux下bash的PS1
- 用C语言实现推箱子小游戏基础程序
- 视频教程-全国计算机二级MS OFFICE考前冲刺课程-计算机等级考试
- java猜数游戏图形界面_java 猜数字游戏 swing实现带界面