完全解决ios页面返回半截白屏或全白屏问题的方法

原创于 2022-07-14 10:19:34 发布 · 3k 阅读

CC 4.0 BY-SA版权

文章标签：

在iOS设备上使用Webview加载Vue应用时，从详情页面返回列表页面会出现白屏现象。问题在于gohistory(-1)未能正确处理body高度，需手动点击才可消除遮罩。解决方案包括：1) 设置history.scrollRestoration为'manual'，阻止自动滚动；2) 在activated钩子中利用setTimeout强制滚动到顶部。这两种方法能有效防止白屏问题的发生。

问题描述：列表页面——>详情页面——>ios自带的返回——>白屏

手动点击白屏处——>问题解决；

原因是，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩

解决1.history.scrollRestoration='manual';
原理：更改history对象的默认滚动属性值
History.scrollRestoration
定义：允许web应用程序在历史导航上显式地设置默认滚动恢复行为
参数值：
1. auto 将恢复用户已滚动到的页面上的位置
2. manual 未还原页上的位置。用户必须手动滚动到该位置

// 通过路由守卫，判断设置manual
router.beforeEach((to, from, next) => {
if (history.scrollRestoration) {
history.scrollRestoration = 'manual'
}
}
解决2activated(){
setTimeout(()=>{
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
},0);
}
原理强制滚动回初始位置