ios内嵌h5页面，点击返回上一级页面时，页面会有部分白屏

最新推荐文章于 2024-05-30 11:35:19 发布

W_Venus

最新推荐文章于 2024-05-30 11:35:19 发布

阅读量1.2k

点赞数

分类专栏： Bug 文章标签： vue.js 前端 ios

本文链接：https://blog.csdn.net/W_Venus/article/details/108376643

版权

Bug 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目使用vue

在写完页面进行测试时，发现从第一级h5页面滑动到底部，然后跳转到第二级h5页面，再点击返回上级页面时，第一级页面会有部分白屏，向下划一下页面又会恢复，安卓没有发现这个问题

解决方式：在页面初次请求数据返回后，添加以下代码

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

百度时发现也有朋友遇见这个问题，详见这里：https://github.com/vuejs/vue/issues/5533

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

W_Venus

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

解决vue (ios系统内嵌H5) 返回上一页白屏

掺乎君的博客

11-19

2839

问题描述：进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决；在vue的issues里面找到了同样的bug 【应该是ios 的锅】 vue-issues 原因：经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决方法：在ajax返回数据后加入以下代码： this.$nextTick(() => {

webview加载页面有2秒白屏_iOS App秒开H5优化总结

weixin_39554775的博客

11-24

936

背景为了快递迭代、更新，公司app有一大模块功能使用H5实现，但是体验比原生差，这就衍生了如何提高H5加载速度，优化体验的问题。此文，记录一下自己的心路历程。腾讯bugly发表的一篇文章《移动端本地 H5 秒开方案探索与实现》[1]中分析，H5体验糟糕，是因为它做了很多事：初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js...

参与评论您还未登录，请先登录后发表或查看评论

IOS内嵌H5页面，返回出现半截白屏问题及解决方案

Jensonhui's Blog

03-22

5301

场景：【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 --> A页面重新请求加载问题：上述场景步骤后，返回A页面会显示一部分白屏，随意滑动页面后，页面显示完整（android下没事）分析：可能跟ios回弹效果有关系，iOS WebView加载网页触摸白屏bug排查解决：方案一：（未使用） html, body { width: 100%; height: 100%; margin: 0; padding: 0; position:

h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示

swallow_y的博客

12-11

2459

问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。

关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下才会显示的问题。

weixin_44616890的博客

05-30

520

关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下才会显示的问题。

ios H5 页面再某些系统中直接白屏问题(微信公众号H5)

阿乐的博客

12-25

1600

1.问题 :用户反馈的问题说是某些ios 系统手机打不开H5 打开了直接是白屏系统是13.4.1 13.3.1 但是比这个高的系统没问题。5. 要么跟iOS的 wkwebview 有关，因为老系统用 uiwebview，现在新系统的网页都只能用 wkwebview。3.要么缺失跟系统有关，验证，将该H5网页放到手机safari上跑，如果正常，看下一条。1.跟设备型号没问题，跟设备型号有关的只是UI差异。2.你说iOS13有问题，高系统没问题，这说明。

微信小程序iOS下拉白屏晃动问题解决方案

12-13

有时页面带有滑动的属性会跟着晃动，体验不是很好解决办法：先禁止页面下拉 { navigationBarTitleText: "购物车", disableScroll:true } 这样的话页面整个都拉不动了，下面溢出的内容就拉不出来了，此时用...

小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据

weixin_39878760的博客

12-19

1354

项目开发中赶上三端接入h5的需求，因此本身动手作h5页面，可是在作的过程当中也赶上了许多的问题javascript小程序端不支持在本地引入，因此须要将h5发布服务器，以请求接口的形式进行访问html首先是H5的开发：java像素单位：写的时候由于须要顾及ios和安卓，并且小程序端也会赶上各类屏幕比，比较麻烦，单位尽可能使用rem；python请求：若是闲麻烦的能够本地引入jq，若是不以为麻烦的能够...

嵌套页面h5怎么调起手机文件_以 web-view 嵌入在小程序中 h5 页面，如何处理附件下载...

weixin_33750664的博客

01-12

1266

前言由于项目体积过大，以至于分包后也逐步超过了小程序的限制，所以将 h5 端的页面以 web-view 的方式嵌入了小程序。这也产生了一些意料之外的问题，这里记一个关于文件预览下载的问题。在 h5 端中，针对图片和视频会使用 img、video 标签达到预览的效果，其余的文件类型会直接粗暴的调用 window.open 的方式打开，如果浏览器能够解析则预览，不能解析浏览器会默认下载。(这里有个问题...

ios 微信打开h5页面，页面过长导致大片白屏问题（解决方式）

C2452610232的博客

10-10

926

ios 微信浏览器兼容

在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案

01-05

原因： -webkit-overflow-scrolling:touch 解释：由于使用-webkit-overflow-scrolling这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。解决办法：滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-webkit-overflow

uniapp IOS H5项目打开文件后返回页面白屏

weixin_44283955的博客

05-20

603

企业微信打开h5页面 window.location.href=url 回退 this.$nextTick(()=>{ const query = uni.createSelectorQuery().in(this); query.select('#box').boundingClientRect(data => { if(data.height == 0){ //白屏页面高度为0 location.reload() //刷新页面 }

uniapp 解决ios上拉下拉白边处理

^_^

03-31

7060

解决微信小程序 ios上滑下滑触底白边显示问题

解决iOS 上拉边界下拉出现白色空白

热门推荐

前端精髓

03-09

1万+

表现手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。产生原因在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。解决方案监听事件禁止滑动由此我们找到解决方案，通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。值...

完全解决ios页面返回半截白屏或全白屏问题的方法

callbackkkkkk的博客

07-14

2571

问题描述：列表页面——>详情页面——>ios自带的返回——>白屏手动点击白屏处——>问题解决；原因是，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决1.history.scrollRestoration='manual'; 原理：更改history对象的默认滚动属性值 History.scrollRestoration 定义：允许web应用程序在历史导航上显式

【vue】ios中返回到列表页出现空白的问题

昔人'

06-18

841

问题：ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来，解决方案：给当前组件最外层元素添加以下样式 overflow-y: auto; -webkit-overflow-scrolling: touch; position: absolute; top:0; left:0; width:100%; height:100%; ...

解决ios打开微信小程序下拉页面出现空白

SIMIN_1617的博客

05-30

5081

在page .json中进行配置，但注意如果页面内容超出页面本身高度则不能用disableScroll:true;否则会导致页面无法滚动. 然而你可能也会遇到加上之后无效，则： disableScroll的优先级小于enablePullDownRefresh，因此如果app.json里是enablePullDownRefresh:true，那如果只是在page.json中加上disable...

IOS H5页面滑动过于频繁出现短暂白屏

CamilleZJ的博客

11-28

1万+

最近做一个H5活动，苹果部分手机用QQ扫描打开后，频繁滑动出现短暂白屏现象，数据均存在只是背景色变白，问题如下：经过排查主要是由于IOS的回弹效果导致，即-webkit-overflow-scrolling:touch 由于使用-webkit-overflow-scrolling这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。下面...

H5 --（解决）ios的webview中上/下拉露出黑灰色背景问题

凉凉的博客

04-18

7900

问题描述：手机H5页面在ios的webview中，下拉（或上拉）会露出黑灰色背景解决思路 1、touchmove 时阻止系统的默认滑动事件 document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); }) 结论：这个方法在安卓上能好使，但在io...

IOS使用WebView内嵌H5页面,无法触发H5页面的点击事件