vue,页面到计时的问题

2017-03-01  本文已影响0人  言叶丶

倒计时

ajax请求接口,获取活动开始时间,在页面实现一个定时器效果

牵扯到倒计时的时候, 不要使用计算属性,计算属性无法手动修改。

解决方法: 在ajax请求成功之后, 对数据进行简单处理,计算出当期时间到活动开始时间的毫秒数, 然后使用自定义过滤器处理数据, 实现 hh:mm:ss 格式。在mounted钩子里写定时器。

注意: 在开发vue单页面应用时,由于定时器是属于window对象, 页面在跳转的时候, 定时器并不会被清除。可以添加beforeRouteLeave钩子清除定时器 。beforeDestroy 和 detroyed钩子要手动执行vm.$detroy()方法才会触发。

{
  ...
  beforeRouteLeave (to, form, next) {
    if (vm.timer) {
        window.clearInterval(vm.timer);
    }
    next();
  }
  ...
}
上一篇 下一篇

猜你喜欢

热点阅读