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的值
然后我们运行界面
可以看到 当我们停在页面上的时候 就是显示中
当我们切到其他界面 触发了事件 判断到隐藏了 就改为了休息中
