1. 首页
  2. 问答
  3. [vuejs/vue-router]ios10&ios11Safari中从一个动态获取数据的列表页面点击列表项进入详情页面然后返回，页面出现一个白色的遮光罩

[vuejs/vue-router]ios10&ios11Safari中从一个动态获取数据的列表页面点击列表项进入详情页面然后返回，页面出现一个白色的遮光罩

2023-12-25 414 views
3
Version

3.0.1

Reproduction link

https://crazyhuiliang.github.io/#/

Steps to reproduce

需要在ios10 / ios11 的 Safari/微信中测试

  1. 打开一个异步获取列表数据（数据量需要至少两页）的列表页面
  2. 向下滚动列表到至少第2页以下
  3. 点击列表项进入详情页
  4. 点击浏览器返回/页面中自己写的返回按钮返回列表页，等待列表页加载出列表后就可以看到，页面出现一个白色的遮罩，页面点击事件会失效，页面滚动一下遮罩会消失

我已经写好了demo，列表页数据是通过一个1秒的延时来构造的，详情页有一个返回 demo：https://crazyhuiliang.github.io/#/

源码在这里：https://github.com/CrazyHuiLiang/my-vue-webpack

What is expected?

我已经做了很久的尝试，仍然没有办法，如果是vue的bug希望能在新版本中修复，如果是什么地方使用不当，希望能给予指出，十分感谢

What is actually happening?

出现bug后页面点击事件会失效，页面滚动一下遮罩又会消失

CrazyHuiLiang

回答

2

如果异步获取数据，则由您滚动到内容

posva

4

问题不在于滚动，问题是当我返回到异步数据的列表页面时，渲染数据时屏幕上有一个白色层。这个白色层会打扰我点击我的视图。

你在ios上见过这种现象吗？

CrazyHuiLiang

6

我无法在ios上查看。您可以发布一些屏幕截图或视频吗？我无法想象你说的话

posva

9

我拍摄了一段视频，https://crazyhuiliang.github.io/video.mp4

  1. 首先我刷新这个页面
  2. 当该页面加载时，该页面会动态获取列表数据
  3. 数据渲染时，
  4. 我向下滑动 1 或 2 页（这一步很重要，但重点不是滚动）
  5. 我点击一个项目跳转到一个详细页面，该页面有一个返回按钮（点我返回）
  6. 点击返回，窗口返回到列表页面。
  7. 当列表页面加载时，页面将获取列表数据，但这一次，当数据渲染时，屏幕上会出现一个白色层。

白色图层会打扰我点击此页面，但我可以滑动图层，只需滑动一点，图层就会消失。所以问题是当我做第 7 步时，会出现一层白色的层，这让我很困扰。

这个问题只出现在ios 10和ios 11上。这很奇怪。这段代码也很简单，你可以在这里看到代码：

https://github.com/CrazyHuiLiang/my-vue-webpack/tree/master/src

CrazyHuiLiang

 相关问题