Vue使用数字滚动插件vue-countTo

简单介绍

vue-countTo是一个无依赖,轻量级的vue数字滚动插件

使用步骤

1. Install vue-countTo (安装)

1
npm install vue-count-to

2. 组件内使用代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
import countTo from 'vue-count-to';
export default {
data () {
return {
startVal: 0,
endVal: 2020
}
},
components: { countTo }
}
</script>

3. 属性及方法配置

  • 属性:
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
  • 方法:
Function Name Description
mountedCallback 挂载成功后回调
start 开始计数时调用
pause 暂停计数时调用
reset 重置countTo
-------------本文结束感谢您的阅读-------------