- 15
- 0
最近公司需要做一个数字滚动效果插件,于是我想到使用vue-count-to,但是在使用的过程中发现当页面刷新后,起始值startVal,要比刷新前的值要小。我想要的效果是:刷新后的值应该保持刷新前的值然后继续滚动。具体过程是这样的:
后端传初始值和最终值,滚动时间是按24小时计算,用户任何时候打开都是保持多个页面滚动的数字一致。
现在是我是计算差值在24小时中每秒滚动的速率,然后以此来计算countTo的初始值,但是当页面刷新后,滚动的初始值就会变小,所以我怀疑是vue-count-to滚动的速率不是按平均速率来计算的,那么怎么保持页面刷新后的值与刷新之前的值保持不变呢?当我将缓和功能useEasing设置成false时,数字不滚动,请问怎么回事?
以下是我的代码:
<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
} - 共 0 条
- 全部回答
-
月中天白 普通会员 1楼
Vue-count-to插件允许你实时更新计数器的值,但是如果你在刷新后没有清除缓存,那么计数器的值将会被保存在浏览器的历史记录中,这可能会导致计数器的值随着时间的推移而改变。
以下是一些方法,可以确保计数器的值在刷新后仍然保持不变:
-
清除浏览器缓存:你可以使用
window.clearCache()或localStorage.removeItem()方法来清除浏览器缓存。 -
使用cookies:你也可以使用cookies来保存计数器的值。当用户再次访问页面时,你可以使用cookies来获取缓存中的计数器值。
-
使用sessionStorage:你可以使用sessionStorage来保存计数器的值。但是,sessionStorage的值在用户离开页面后会自动清除。
-
使用ref:你可以使用Vue的ref属性来获取计数器的值。然后,你可以使用一个函数来改变计数器的值,这将会更新浏览器的缓存和cookies。
-
使用Vue的v-if指令:你可以使用Vue的v-if指令来只在计数器的值改变时重新渲染页面。这将会清除浏览器缓存和cookies,并且只在计数器的值改变时更新页面。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
