在开发中遇到了需要监听页面隐藏展示(比如切到后台又切回来),这个时候我立马想到onShow生命周期,不过反应过来这个是微信小程序的。如果想在h5里面监听的话,只需要加一个监听器
1
2
3
4
5
6
7document.addEventListener('visibilitychange', async () => {
if (document.visibilityState == 'visible') {
//页面展示
} eles {
//页面隐藏
}
})解决了这个问题,又来了一个新的问题,比如我开发的A页面,从A页面跳转到B页面,再从B页面返回到A页面,这个使用上面所说的visibilitychange是监听不到的,因为本质上讲A页面并没有被隐藏,这里不展开细说,只说怎么解决,那就是用另一个事件监听 popstate
1
2
3window.addEventListener('popstate', async () => {
//监听到页面返回
})好的,又把这个问题解决了,但是出现了一个新的问题,那就是如果我使用了vue-router,在单页面应用里进行路由跳转,因为链接的变化,路由跳转也会被认为是页面之间的切换,因此也会触发popstate这个监听。
但这显然不是我想要的效果,因此我只好又拿出了另外一个事件监听: pageshow
eg: 这里使用popstate也可以完成需求,用全局参数记录一下是否路由跳转就行1
2
3
4
5
6window.addEventListener('pageshow', async () => {
//监听到页面展示
if (StoreModule.loadEnd) {//loadEnd为true即为页面加载完成
//to do something
}
})pageshow,字面上就能看出是页面展示的意思,因此页面的最开始加载和从其他页面返回才会触发,而hash路由跳转的时候并不会触发,再用一个vuex保存一个页面是否加载完成的参数来判断,就能完美处理页面返回的监听处理逻辑了。