如何在keep-alive中使用倒计时
Posted 小hu同学
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在keep-alive中使用倒计时相关的知识,希望对你有一定的参考价值。
项目:基于安卓设备开发的H5
描述:头部为状态栏,中间内容区域使用的是keep-alive,来进行的切换
需求1:在Home页面点击某个按钮,跳转至页面A
需求2:在页面A有一个关闭按钮,一个倒计时,点击关闭跳转至Home页,倒计时结束后也跳转至Home
这里就不展开了
在路由页面添加路由后,就可以点击跳转
this.$router.push('/路由名称')
<div class="modeCountDown"> modeCount 秒</div>
下面代码为vue 实例代码
data()
return
// 定时器名称
timer: null,
modeCount: 30,
,
//keep-alive生命周期开始
activated()
// 调用倒计时方法
this.changModeCount()
,
//keep-alive生命周期销毁
deactivated()
// 清除定时器
clearInterval(this.timer);
this.modeCount =30;
,
methods:
// 这个是点击关闭事件,结构中我没有写出来
btnToHome()
//跳转路由
this.$router.push("/home");
// 清除定时器
clearInterval(this.timer);
,
// 倒计时事件
changModeCount()
this.timer = setInterval(() =>
this.modeCount--;
//判断数值小于0时,跳转路由
//这里不用在去做清除定时器处理
//我在那个“deactivated”生命周期的时候已经做了处理
if (this.modeCount < 0)
this.$router.push("/home");
, 1000);
,
以上是关于如何在keep-alive中使用倒计时的主要内容,如果未能解决你的问题,请参考以下文章