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

最新推荐文章于 2024-05-30 11:35:19 发布
最新推荐文章于 2024-05-30 11:35:19 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： VUE JavaScript 文章标签： vue bug js ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46172871/article/details/109805155
版权
本文主要探讨了在iOS系统内，使用Vue进行H5开发时遇到的返回上一页出现白屏的问题。原因是iOS Webview在回退历史记录时未能正确处理body高度，导致遮罩层出现。解决方案是在Ajax返回数据后添加特定代码来解决这个问题。
摘要由CSDN通过智能技术生成

问题描述：

进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决；

在vue的issues里面找到了同样的bug 【应该是ios 的锅】
vue-issues

原因：

经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩

解决方法：

在ajax返回数据后 加入以下代码：

this.$nextTick(() => {
      
	window.scrollTo(
最低0.47元/天 解锁文章
掺乎君
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5 手机左滑画面关闭,app、h5上实现左滑、右滑返回上一页
weixin_39953244的博客
06-16 2748
下面的代码是我自用的，等后面空了再做成组件。先以代码的形式分享。由于ios本身就自带了功能，所以ios的左右滑功能我给过滤掉了(需要的话可以自己修改代码)。第一步：将代码保存为组件下面是代码，可以定义为 pageFooter.vue，以我自己的为例，我将文件放到了@/components/common/pageFooter.vue中下面是代码：export default {props: {lef...
vue中解决微信html5原生ios虚拟键返回不刷新问题
01-18
做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会...
ios内嵌h5返回上一页后空白触屏一下或者拉动一下,才会显示的问题
weixin_41143662的博客
05-21 5219
移动端开发react vue项目中，ios上点击返回的时候，会出现空白现象，触屏一下或者拉动一下,才会显示出来 也查找过很多资料，但都实现不了，包括#app设置为 position:absolute 也不行 最后在生命周期总 updated的时候强制改变scorllTop updated() { document.scrollingElement.scrollTop = 0 ...
关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下 才会显示的问题。
最新发布
weixin_44616890的博客
05-30 411
关于h5 ios返回上一页页面显示空白，然后触屏或者拉动一下 才会显示的问题。
【vue】ios在详情页中返回到列表页出现空白的问题
炒饭的博客
08-07 3261
移动端开发 vue项目中，ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来，针对此问题，尝试了很多次，最终解决方法如下： 给列表的外层容器加上如下样式： overflow-y: auto; -webkit-overflow-scrolling: touch; height:100%; 只需几句css 就能搞定...
【vue】ios中返回到列表页出现空白的问题
昔人'
06-18 795
问题：ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来， 解决方案：给当前组件最外层元素添加以下样式 overflow-y: auto; -webkit-overflow-scrolling: touch; position: absolute; top:0; left:0; width:100%; height:100%; ...
h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示
swallow_y的博客
12-11 2255
问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。 解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。 值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。
vue 移动端 返回上一页 空白
weixin_30273175的博客
11-22 1862
vue移动端项目中，部分机型点击返回上一页的时候，会出现空白，点击或者滑动，页面回复正常。这是由于返回后无法将 body 的高度拉开，使得遮住，触发轻点击，方可消除遮罩针对此问题。 原因在于，html、body都是100%，#app撑起了父元素的高度，但是浏览器默认的滚动scroll并不是#app，而是body。某些因素，造成返回history 后，无法复原，为此，我们将#app 进行了绝对定位...
vue 返回上一页,页面样式错乱的解决
10-15
总结一下，Vue项目中返回上一页页面样式错乱的解决方法主要包括：为组件外层添加特定的class或id进行样式区分，合理利用CSS预处理器的模块化功能，使用Vue的作用域样式和插槽，以及全局设置样式的正确方式。...
解决vue js IOS H5focus无法自动弹出键盘的问题
10-18
在使用Vue.js开发移动应用时，开发者可能会遇到一个问题：在iOS设备上，当一个HTML表单元素获得焦点时（例如输入框），系统默认的虚拟键盘并不会自动弹出。这个问题常发生在H5页面上，尤其是当开发者期望用户体验与...
Vue移动端右滑屏幕返回上一页附源码下载
12-10
本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。 查看演示 下载源码 安装依赖 使用npm安装vue-directive-touch组件。 npm install vue-directive-touch --save 引入组件 在main.js中引入vue-directive-...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
01-05
解决办法： 滚动之前，先设-webit-overflow-scrolling的属性值为auto，然后页面滚动完了，再设为touch即可。 实例： $(#id).css('-webkit-overflow-scrolling','auto'); $(#id).scrollTop(9999); $(#id).css('-...
VUE跳转外部页面，返回页面加载空白
zxl0428的博客
01-09 1682
1.网上方法一： 参考：https://www.cnblogs.com/zhaoyun4122/p/10796929.html 没有尝试 2.添加iframe
ios10vue白屏
一出好剧
12-10 588
ios10打开vue白屏解决方案
vue 框架 IOS 返回出现空白问题
qq_37337830的博客
01-25 635
发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩 解决方式； 在发起请求的地方添加强制滚动到顶部 this.$nextTick(() => { window.scrollTo(0, 1) window.scrollTo(0, 0) }) 引用地址：https://blog.csdn.net/m0_46172871/article/details/109805155?utm
VUE登录后返回原页面空白
心随梦飞
05-06 1049
https://router.vuejs.org/zh/guide/essentials/history-mode.html
vue单页面项目返回上一页无效，链接变化了，但是页面没有变化
anda9128的博客
07-17 1942
在最近的项目中，返回上一页没有效果，经过好久的排查才发现问题，是路由守卫写法不规范导致。 在项目中用路由守卫做了登录拦截，没登录的跳转到登录页面。页面跳转和拦截都没问题，但是返回上一页就不行了，也没有报错。 代码贴上来 router.beforeEach((to, from, next) => { if (to.meta.loginCheck) { ...
IOS端h5页面跳转到第三方页面，回跳页面空白问题
weixin_64740434的博客
09-07 457
【代码】IOS端h5页面跳转到第三方页面，回跳页面空白问题。
微信公众号开发 用vue做前端页面 解决IOS返回白屏问题
热门推荐
guxuehua的博客
01-10 1万+
原文链接地址 问题描述： 进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决 原因分析: 在ios机器上使用webview开发Vue项目时候，go history(-1)，无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩 解决方案实现原理： html，body都是100%，#app撑起了...
vue3框架的h5返回上一页 用哪个
05-12
可以使用 `router.back()` 方法来实现在 Vue3 中返回上一页。该方法会在浏览器的历史记录中回退一步。在使用该方法前，需要确保你已经安装并配置好了 Vue Router。 例如，你可以在一个按钮的点击事件中使用 `router.back()` 方法来实现返回上一页： ```html <template> <button @click="goBack">返回上一页</button> </template> <script> import { useRoute, useRouter } from 'vue-router' export default { setup() { const route = useRoute() const router = useRouter() const goBack = () => { router.back() } return { goBack } } } </script> ``` 在上面的代码中，我们使用了 `useRouter()` 和 `useRoute()` 两个 Vue Router 提供的 Composition API，来获取当前的路由实例和路由对象。然后在 `goBack()` 方法中，我们调用了 `router.back()` 方法来实现返回上一页的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值