vue頁面監(jiān)聽是否置為后臺或可見狀態(tài)問題

更新時間：2023年10月21日 09:12:49 作者：鋼鐵熊貓33

這篇文章主要介紹了vue頁面監(jiān)聽是否置為后臺或可見狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue頁面監(jiān)聽是否置為后臺或可見狀態(tài)

使用場景

微信公眾號網(wǎng)頁中使用了彈幕，當(dāng)微信在后臺時，停止彈幕程序的執(zhí)行
頁面有定時任務(wù)執(zhí)行時，除了退出頁面要停止外，當(dāng)頁面在后臺時，也可以清除定時任務(wù)，當(dāng)可見時，再重新啟動

使用方式

安裝

npm i vue-visibility-change

全局使用

import Vue from 'vue'
import visibility from 'vue-visibility-change'

Vue.use(visibility)

const listenPageVisible = visibility.change((evt, hidden) => {
  console.log('隱藏: ' + hidden)
})

局部使用

<template>
  <div v-visibility-change="listenVisible"></div>
</template>
<script>
export default {
  methods: {
    listenVisible(evt, hidden) {
      console.log('隱藏: ' + hidden)
    }
  }
}
</script>

h5監(jiān)聽頁面進(jìn)入后臺

方法：

export const pageChangeShowHide = function(){
    let hidden,state,visibilityChange;
    if(typeof document.hidden !== 'undefined'){
        hidden = 'hidden';
        state = 'visibilityState';
        visibilityChange = 'visibilitychange';
    }else if(typeof document.mozHidden !== 'undefined'){
        hidden = 'mozHidden';
        state = 'mozvisibilityState';
        visibilityChange = 'mozvisibilitychange';
    }else if(typeof document.msHidden !== 'undefined'){
        hidden = 'msHidden';
        state = 'msvisibilityState';
        visibilityChange = 'msvisibilitychange';
    }else if(typeof document.webkitHidden !== 'undefined'){
        hidden = 'webkitHidden';
        state = 'webkitvisibilityState';
        visibilityChange = 'webkitvisibilitychange';
    }
    return { hidden,state,visibilityChange }
}

頁面中使用：

this.$nextTick(() => {
    let { hidden, state, visibilityChange } = common.pageChangeShowHide()
    document.addEventListener(visibilityChange, ()=> {
        // 頁面變?yōu)榭梢姇r觸發(fā) 
        if (document[state] == 'visible') {
            this.memberdayActivityInfo()
        }
    });
})