vue-countTo是一个无依赖,轻量级的vue组件,可以实现数字的滚动效果
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
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函数
函数名 | 描述 |
---|---|
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset | 重置countTo |
示例:
<head>
<meta charset="utf-8" />
<title>countTo</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="xdlove-vue-countTo-master/vue-countTo/dist/vue-count-to.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="aaa">
<count-to class="example1" style="font-size:40px;" :start-val=0 :end-val=endnums :duration=3000></count-to>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#aaa",
data:{
startnums:30,
endnums:100,
},
mounted:function(){
},
methods:{
}
})
</script>
</body>
效果:
vue-routerTo在大部分浏览器中都可以生效
一起学习,一起进步 -.- ,如有错误,可以发评论