之前用 vue 做项目就遇到过这个问题, 同事上了基 hub 提了个 issue(详见 iOS Safari renders blank page https://github.com/vuejs/vue/issues/5533), 又看到了好几个类似的 issue, 发现作者真的对这个问题没有一个明确的答复和解决方案 (_, ) 啊, 认为这个是 ios 系统的 bug, 而不是 vue 的 bug... 行吧, 既然如此, 只能我们自己动手来解决这个问题啦.
产生环境
vue ^2.5.2
你期望的表现
页面正常渲染
实际表现
页面无法正常显示, 出现白屏, 手动滚动一下页面显示正常
复现步骤(借用了别人的图~)
解决方案
1. 手动页面内触发 nextTick
Vue.nextTick( [callback, context] )
参数:
- {Function} [callback]
- {Object} [context]
用法:
在下次 DOM 更新循环结束之后执行延迟回调. 在修改数据之后立即使用这个方法, 获取更新后的 DOM.
方案:
- Vue.nextTick().then(() => {
- window.scrollTo(0, 1); // 触发页面滚动
- window.scrollTo(0, 0);
- });
2.vue-router 提供的滚动行为
参数:
滚动行为 https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html
用法:
- const router = new VueRouter({
- routes: [...],
- scrollBehavior (to, from, savedPosition) {
- // return 期望滚动到哪个的位置
- }
- })
方案:
- const router = new VueRouter({
- routes: [...],
- // 异步滚动 2.8.0 新增
- scrollBehavior () {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve({ x: 0, y: 1 }); // 和 window.scrollTo 类似
- }, 0);
- })
- }
- })
3. 更改页面布局
原因:
经过排查, 发现在 ios 机器上使用 webview(微信有两个内核, 一个是 wkwebview, 一个是 uiwebview)开发 Vue 项目时候, go history(-1), 无法将 body 的高度拉掉, 使得遮住, 触发轻点击, 方可消除该遮罩.
解决:
- html, body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- position: relative;
- }
- .container {
- width: 100%;
- height: 100%;
- background: #fff;
- overflow: scroll;
- -webkit-overflow-scrolling: touch;
- position: absolute;
- left:0;
- top:0;
- }
欢迎知道的盆友, 提供更多的解决办法. 爱你们 (3) ~
参考链接:
vue bug 汇总 https://github.com/chinafootballyu/article/issues/47
ios 下(尤其是 webView)Vue 项目浏览器白屏遮罩粗劣的解决方案 https://github.com/vuejs/vue/issues/7229
iOS Safari renders blank page https://github.com/vuejs/vue/issues/5533
ios 组件点返回白屏遮挡问题 https://github.com/ElemeFE/mint-ui/issues/937
来源: http://www.qdfuns.com/article/11994/615ab8066fb2619c235ca5749afa2da8.html