vue开发总结—IOS页面渲染白屏问题

原创 小玛丽打怪兽 随笔 vue 944阅读 2018-04-27 16:23:10 举报

之前用vue做项目就遇到过这个问题,同事上了基hub提了个issue(详见iOS Safari renders blank page),又看到了好几个类似的issue,发现作者真的对这个问题没有一个明确的答复和解决方案( ̄_, ̄ )啊,认为这个是ios系统的bug,而不是vue的bug。。。行吧,既然如此,只能我们自己动手来解决这个问题啦。

产生环境

vue ^2.5.2

你期望的表现

页面正常渲染

实际表现

页面无法正常显示,出现白屏,手动滚动一下页面显示正常

复现步骤(借用了别人的图~)

解决方案

1.手动页面内触发nextTick

  • 参数:
    • {Function} [callback]
    • {Object} [context]
  • 用法:
    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
  • 方案:

2.vue-router提供的滚动行为

  • 方案:

3. 更改页面布局

  • 原因:

    经过排查,发现在ios机器上使用webview(微信有两个内核,一个是wkwebview,一个是uiwebview)开发Vue项目时候,go history(-1),无法将body的高度拉掉,使得遮住,触发轻点击,方可消除该遮罩。

  • 解决:

欢迎知道的盆友,提供更多的解决办法。爱你们(づ ̄3 ̄)づ╭❤~

参考链接:

vue bug汇总
ios 下(尤其是webView)Vue项目浏览器白屏遮罩粗劣的解决方案
iOS Safari renders blank page
ios 组件点返回白屏遮挡问题

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复