如何在keep-alive中使用倒计时

Posted 2022-05-28 小hu同学

项目：基于安卓设备开发的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);
    ,