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

6 篇文章 0 订阅
4 篇文章 0 订阅

问题场景:

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;
  }

以上~~~

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值