Pasoul / blog

🛠 学习笔记 & 源码分析 & 代码规范 & 数据结构与算法
17 stars 3 forks source link

记一次vue渲染白屏的hack方法 #13

Open Pasoul opened 6 years ago

Pasoul commented 6 years ago

复现问题步骤

  1. 首页滑动一段距离之后点击list,进入到详情页

2.由于单页面共享一个浏览器滚动条,并且页面通过keep-alive缓存,导致详情页没有正确回到顶部 wechatimg470

3.为了避免上述情况,在detail页面强制滚动到顶部 window.scrollTo(0, 0)

4.从详情页返回到首页,由于每次返回到首页,首页都会重新请求数据更新页面,导致页面出现白屏,如果轻拂一下页面,就可以正常展示了 wechatimg472

解决方法:

参考vue的issue,在首页请求数据之后,动态的设置scrollTop

this.$nextTick(() => {
    window.scrollTo(0, 1)
    window.scrollTo(0, 0)
})