请问一个嵌套在小程序webview里面的h5页面,如何能够监听到当前这个webview的显示和隐藏事件呢?
比如说我这个小程序有四个tab,其中:
订单的page是一个嵌套的H5页面,现在我来回切换底部的四个tab,发现h5的pageshow,resume,visibilitychange等事件都不能很好的触发,要么就是有兼容性问题,要么就是只在页面加载时执行,之后切换显示就不执行了。请问有什么好的办法么?
框架类型 | API/组件名称 | 终端类型 | 操作系统 | 微信版本 | 基础库版本 |
---|---|---|---|---|---|
小程序 | web-view | 客户端 | 无特定版本 | 基础库大于1.6.5 |
3 个回答
监听 visibilitychange;我这边是同时监听pageshow 和 visibilitychange,对最终执行的事件做了一个throttle处理。
看下来,是因为小程序的webview 不会触发pageshow事件。
const pageCacheBackHandler = useCallback(() => { throttle(doSomething()); }, [doSomething]); const pageShowEventHandler = useCallback( (event) => { if (event && event.persisted) { pageCacheBackHandler(); } }, [pageCacheBackHanlder] ); const visibilityStateChangeEventHandler = useCallback(() => { if (document.visibilityState == "visible") { pageCacheBackHandler(); } }, [pageCacheBackHandler]); useEffect(() => { window.addEventListener("pageshow", pageShowEventHandler); document.addEventListener( "visibilitychange", visibilityStateChangeEventHandler ); return () => { window.removeEventListener("pageshow", pageShowEventHandler); document.removeEventListener( "visibilitychange", visibilityStateChangeEventHandler ); }; }, [ pageShowEventHandler, visibilityStateChangeEventHandler, ]);
能解决了吗
顶一下 比较着急
找到好的办法了吗