recently the company needs to do a digital scrolling plug-in, so I thought of using vue-count-to, but in the process of using it, I found that when the page is refreshed, the starting value startVal, is smaller than the value before refresh. The effect I want is that the value after refresh should remain the value before refresh and then continue to scroll. The specific process is as follows:
the backend passes the initial and final values, and the scrolling time is calculated according to 24 hours. Users keep the numbers of multiple pages scrolling the same whenever they are opened.
now I am calculating the rate at which the difference scrolls per second in 24 hours, and then use this to calculate the initial value of countTo, but when the page is refreshed, the initial value of scrolling becomes smaller, so I suspect that the rate of vue-count-to scrolling is not calculated at the average rate, so how to keep the value after page refresh unchanged with the value before refresh? When I set the ease function useEasing to false, the numbers don"t scroll. What"s going on?
here is my code:
<countTo :separator="separator" :decimals="decimals" :startVal="startVal" :endVal="endVal" :duration="durationTime"></countTo>
import countTo from "vue-count-to"
data(){
return{
startDatas: 0,
//
separator: "",
startVal: 10,
endVal: 20,
decimals: 2,
durationTime: 5000,
}
}
//
getTimeDatas(start, end) {
console.log(start, end, 2610)
//
var res = Number(end - start)
//
var curTime = Number(this.configData.cur_time) * 1000
//
var speeds = res / 86400
//
var time = (this.$dateFmt(curTime, "HH:mm:ss"))
//
this.startVal = this.timeToSec(time) * speeds + start
this.endVal = end
console.log(this.startVal, this.endVal, 355)
//
this.durationTime = (86400 - this.timeToSec(time)) * 1000
},
//
timeToSec(time) {
console.log(time, 333)
var hour = time.split(":")[0]
var min = time.split(":")[1]
var sec = time.split(":")[2]
var s = Number(hour * 3600) + Number(min * 60) + Number(sec)
return s
}