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

最新推荐文章于 2024-05-30 11:35:19 发布
最新推荐文章于 2024-05-30 11:35:19 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Bug 文章标签： vue.js 前端 ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_Venus/article/details/108376643
版权

项目使用vue

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

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

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

 

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

W_Venus
关注
专栏目录
解决vue (ios系统内嵌H5) 返回上一页白屏
掺乎君的博客
11-19 2759
问题描述： 进入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 893
背景为了快递迭代、更新，公司app有一大模块功能使用H5实现，但是体验比原生差，这就衍生了如何提高H5加载速度，优化体验的问题。此文，记录一下自己的心路历程。腾讯bugly发表的一篇文章《移动端本地 H5 秒开方案探索与实现》[1]中分析，H5体验糟糕，是因为它做了很多事：初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js...
h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示
sinat_39049092的博客
01-19 1357
问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。 解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。 值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。
IOS内嵌H5页面，返回出现半截白屏问题及解决方案
Jensonhui's Blog
03-22 5203
场景： 【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 --> A页面重新请求加载 问题：上述场景步骤后，返回A页面会显示一部分白屏，随意滑动页面后，页面显示完整（android下没事） 分析：可能跟ios回弹效果有关系，iOS WebView加载网页触摸白屏bug排查 解决： 方案一：（未使用） html, body { width: 100%; height: 100%; margin: 0; padding: 0; position:
关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下 才会显示的问题。
最新发布
weixin_44616890的博客
05-30 460
关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下 才会显示的问题。
ios H5 页面再某些系统中直接白屏问题(微信公众号H5)
阿乐的博客
12-25 1487
1.问题 :用户反馈的问题 说是某些ios 系统手机打不开H5 打开了直接是白屏 系统是13.4.1 13.3.1 但是比这个高的系统没问题。5. 要么跟iOS的 wkwebview 有关，因为老系统用 uiwebview，现在新系统的网页都只能用 wkwebview。3.要么缺失跟系统有关，验证，将该H5网页放到手机safari上跑，如果正常，看下一条。1.跟设备型号没问题，跟设备型号有关的只是UI差异。2.你说iOS13有问题，高系统没问题，这说明。
小程序 webview 组件 实现与h5页面之间的传值及返回到上一级小程序页面
热门推荐
Say_one的博客
03-08 1万+
小程序使用webview组件之前需在后台配置业务域名实现与h5页面的交互。配置业务域名请移至微信公众平台 左侧选择开发选项，会找到相应的域名配置。 如图操作顺序及需求： 图1 图2 图3 在此项目中遇到小程序与h5之间的跳转传值回显的问题。从h5页面（图1）跳转到小程序页面（图2）选择地点之后自动返回到h5页面并把地点回显到h5页面。解决办法如下步骤： 前边已经说明，如果在小程序中使用h5...
微信小程序iOS下拉白屏晃动问题解决方案
12-13
有时页面带有滑动的属性会跟着晃动，体验不是很好 解决办法： 先禁止页面下拉 { navigationBarTitleText: "购物车", disableScroll:true } 这样的话页面整个都拉不动了，下面溢出的内容就拉不出来了，此时用...
小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据
weixin_39878760的博客
12-19 1329
项目开发中赶上三端接入h5的需求，因此本身动手作h5页面，可是在作的过程当中也赶上了许多的问题javascript小程序端不支持在本地引入，因此须要将h5发布服务器，以请求接口的形式进行访问html首先是H5的开发：java像素单位：写的时候由于须要顾及ios和安卓，并且小程序端也会赶上各类屏幕比，比较麻烦，单位尽可能使用rem；python请求：若是闲麻烦的能够本地引入jq，若是不以为麻烦的能够...
在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
ios 微信打开h5页面，页面过长导致大片白屏问题（解决方式）
C2452610232的博客
10-10 821
ios 微信浏览器兼容
uniapp IOS H5项目打开文件后返回页面白屏
weixin_44283955的博客
05-20 589
企业微信打开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 6901
解决微信小程序 ios上滑下滑触底白边显示问题
解决iOS 上拉边界下拉出现白色空白
前端精髓
03-09 1万+
表现 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。 产生原因 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。 解决方案 监听事件禁止滑动 由此我们找到解决方案，通过监听 touchmove，让需要滑动的地方滑动，不需要滑动的地方禁止滑动。 值...
完全解决ios页面返回半截白屏或全白屏问题的方法
callbackkkkkk的博客
07-14 2504
问题描述：列表页面——>详情页面——>ios自带的返回——>白屏 手动点击白屏处——>问题解决； 原因是，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩 解决1.history.scrollRestoration='manual'; 原理：更改history对象的默认滚动属性值 History.scrollRestoration 定义：允许web应用程序在历史导航上显式
【vue】ios中返回到列表页出现空白的问题
昔人'
06-18 812
问题：ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来， 解决方案：给当前组件最外层元素添加以下样式 overflow-y: auto; -webkit-overflow-scrolling: touch; position: absolute; top:0; left:0; width:100%; height:100%; ...
解决ios打开微信小程序下拉页面出现空白
SIMIN_1617的博客
05-30 5037
在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这个属性，苹果手机会使用硬件加速，从而促使页面滑动得更加流畅，然而也导致了页面出现空白的情况。 下面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值