vue页面监听是否置为后台或可见状态问题
作者：钢铁熊猫33
这篇文章主要介绍了vue页面监听是否置为后台或可见状态问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue页面监听是否置为后台或可见状态
使用场景
- 微信公众号网页中使用了弹幕，当微信在后台时，停止弹幕程序的执行
- 页面有定时任务执行时，除了退出页面要停止外，当页面在后台时，也可以清除定时任务，当可见时，再重新启动
推荐插件
vue-visibility-change
使用方式
安装
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监听页面进入后台
方法：
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, ()=> {
// 页面变为可见时触发
if (document[state] == 'visible') {
this.memberdayActivityInfo()
}
});
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。