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 | |
endVal | 結束值 | Number | 2017 |
duration | 持續時間,以毫秒為機關 | Number | 3000 |
autoplay | 自動播放 | Boolean | true |
decimals | 要顯示的小數位數 | Number | |
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 |
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:保留小數點後幾位