账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    怎样保持vue-count-to插件在刷新后还能保持刷新前的值呢?
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 月中天白 普通会员 1楼

      Vue-count-to插件允许你实时更新计数器的值,但是如果你在刷新后没有清除缓存,那么计数器的值将会被保存在浏览器的历史记录中,这可能会导致计数器的值随着时间的推移而改变。

      以下是一些方法,可以确保计数器的值在刷新后仍然保持不变:

      1. 清除浏览器缓存:你可以使用window.clearCache()localStorage.removeItem()方法来清除浏览器缓存。

      2. 使用cookies:你也可以使用cookies来保存计数器的值。当用户再次访问页面时,你可以使用cookies来获取缓存中的计数器值。

      3. 使用sessionStorage:你可以使用sessionStorage来保存计数器的值。但是,sessionStorage的值在用户离开页面后会自动清除。

      4. 使用ref:你可以使用Vue的ref属性来获取计数器的值。然后,你可以使用一个函数来改变计数器的值,这将会更新浏览器的缓存和cookies。

      5. 使用Vue的v-if指令:你可以使用Vue的v-if指令来只在计数器的值改变时重新渲染页面。这将会清除浏览器缓存和cookies,并且只在计数器的值改变时更新页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部