vue做数字滚动效果
vue实现数字滚动效果近期在做项目的时候,产品要求实现数字滚动效果如下:用jquery实现html:<div class="develop"><!--滚动的数字--><p><span class="shuz...
·
vue实现数字滚动效果
近期在做项目的时候,产品要求实现数字滚动效果如下:
用jquery实现
html:
<div class="develop">
<!--滚动的数字-->
<p><span class="shuzi">3000000</span></p>
<p><span class="shuzi">60000</span></p>
</div>
js:
$(".navigation_right li").click(function () {
$(this).siblings('li').removeClass("yanse");
});
let arr = $(".develop>p>.shuzi");
arr.each(function(e, a){
let num = $(a).text()
let i = 0;
let count = parseInt(num /500);
let timer = setInterval(function(){
$(a).text(i)
i += count;
if (i > num)
window.clearInterval(timer)
}, 5)
})
这样做有一个问题,只能和500取余且为整数,而且滚动的时间也没发控制,显然是不满足我们的业务场景的。
用vue-countTo实现
vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。
安装使用
npm install vue-count-to
例子
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
//直接引入组件'vue-count-to'
import countTo from 'vue-count-to';
export default {
//注册组件
components: { countTo },
data () {
return {
//数字开始
startVal: 0,
//数字结束
endVal: 50000
}
}
}
</script>
其中:startVal为开始数字,startVal为结束数字,duration为滚动时长, decimal:保留小数点后几位
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 |
更多推荐
已为社区贡献1条内容
所有评论(0)