关于vue.js:关于移动端浏览器转入后台后倒计时停止运行的问题

48次阅读

共计 1076 个字符,预计需要花费 3 分钟才能阅读完成。

最近做微信公众号 H5 页面,有一个用户培修申请的性能。当用户增加申请胜利后,跳转到一个提醒增加胜利页面,此页面有一个倒计时,倒计时实现后再跳转到培修列表页面。
然而当倒计时时,按 home 键将微信切换到后盾,再进入微信,会发现倒计时进行在退出时的状态。冀望的是,倒计时应该复原倒计时。
当微信切换到后盾时,安卓端会触发了 visibilitychange 事件,而苹果端不会触发此事件,还要侦听 pagehide 事件。
另外,思考到兼容性,要应用 document.addEventListener 而不是 window.addEventListener 来注册回调。因为 Safari <14.0 仅反对前者。

当事件产生时,能够通过上面的属性获取页面的状态:
1、document.visibilityState

返回 document 的可见性, 由此能够晓得以后文档 (即页面) 是在背地, 或是不可见的暗藏标签页,或是 (正在) 预渲染。值有:
  • ‘visible’ : 表明页面为浏览器以后激活 tab,而且窗口不是最小化状态。
  • ‘hidden’ : 页面不是以后激活 tab 页面,或者窗口最小化了,此时页面对用户不可见,或者操作系统正处于“锁屏状态”。
  • ‘prerender’ : 页面此时正在渲染中, 因而是不可见的。文档只能从此状态开始,永远不能从其余值变为此状态。留神: 浏览器反对是可选的。

2、document.hidden:true/false

我的项目应用 uni-app 框架,解决的代码如下:

created() {
  document.addEventListener('visibilitychange', e => {if(document.hidden) {// 网页被挂起}else {
         // 网页被呼起
         this.countDown(this.countDownTime)
      }
   })
   // 当 visibleStateState 属性的值转换为 hidden 时,Safari 不会按预期触发 visibilitychange;// 因而,须要侦听 pagehide 事件
   // 出于兼容性起因,应用 document.addEventListener 而不是 window.addEventListener 来注册回调。因为 Safari<14.0 仅反对前者。document.addEventListener('pagehide', function(e) {if(e.persisted) {// 网页被挂起}else {
          // 网页被呼起    
          this.countDown(this.countDownTime)
       }
    })           
    this.countDown(this.time)
},

正文完
 0