ios返回只显示部分数据,轻触或滑动页面出现完整数据

问题场景:

ios从详情页放回当前列表页后,只显示下半部分列表,上半部分不展示,需要用手稍微滑动下页面才能完全展示当前页面,见下图:

在这里插入图片描述


原因分析:

从当前页面顶部进入详情返回后未出现该问题;
从当前页面滑到底部进入详情返回后必现该问题。
1.尝试在离开路由前beforeRouterLeave,通过设置document.documentElement.scrollTop和document.body.scrollTop均为0,只第一次成功,估计有缓存,导致问题还是出现;
2.上一步怕是有缓存,尝试在详情页返回该页面前,也使用与上同样的方法,不奏效:


解决方案:

查资料发现PC端和H5端滑动窗体滚动元素不一致导致的兼容性问题:
PC端:document.body.scrollTop一直是0,滚动元素是document.documentElement;
H5:document.documentElement.scrollTop一直是0,滚动元素是document.body;

为了解决上述兼容性问题,出现了scrollingElement:
PC端:document.scrollingElement就是document.documentElement;
H5端:document.scrollingElement就是document.body。

解决方法:updated声明周期设置document.scrollingElement.scrollTop为0;

updated() {
    document.scrollingElement.scrollTop = 0;
  }

以上~~~