html监听界面被隐藏或显示
vue相比于小程序和uni-app 显然少了两个有点用的生命周期
onShow 应用被展示
onHide 应用被隐藏
但其实这个 要做其实也很简单 JavaScript中 有对应的visibilitychange事件可以监听
我们Html参考代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>展示中</title>
</head>
<body><script>document.addEventListener("visibilitychange", function() {if(document.hidden){document.title = "休息中";}else{document.title = "展示中";}});</script>
</body>
</html>
这里 当visibilitychange事件触发 我们通过document.hidden确认是显示 还是被隐藏了
然后修改title的值
然后我们运行界面
可以看到 当我们停在页面上的时候 就是显示中
当我们切到其他界面 触发了事件 判断到隐藏了 就改为了休息中
