问题描述见图:
解决办法:
主要监听document的visibilitychange事件
在vue的methods
/* 监听页面显示隐藏 */
onPageVisibility(functions) {
var _t = {};
var onShowCall = function () {
if (!functions || !functions.show) {
return;
}
window.clearTimeout(_t.showTime);
_t.showTime = window.setTimeout(function () {
functions.show();
}, 100);
};
var onHideCall = function () {
if (!functions || !functions.hide) {
return;
}
window.clearTimeout(_t.hideTime);
_t.hideTime = window.setTimeout(function () {
functions.hide();
}, 100);
};
document.addEventListener('visibilitychange', function () {
var visibility = document.visibilityState;
if (visibility == 'visible') {
onShowCall();
} else if (visibility == 'hidden') {
onHideCall();
}
});
window.addEventListener(
'pageshow',
function () {
onShowCall();
},
false
);
window.addEventListener(
'pagehide',
function () {
onHideCall();
},
false
);
},
mounted里调用 在data里定义reloadFlag标志是否需要重新加载,根据的值进行加载页面(即刷新页面)
mounted(){
const _that = this;
this.onPageVisibility({
show: function () {
if (_that.reloadFlag == true) {
location.reload();
}
},
hide: function () {
_that.reloadFlag = true;
},
});
}