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

您所在的位置：网站首页 › 苹果13如何设置返回上一页屏幕不亮 › IOS内嵌H5页面，返回出现半截白屏问题及解决方案

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

2024-07-17 01:22| 来源: 网络整理| 查看: 265

场景：【ios内嵌加载h5页面】

A页面加载数据 ---> 跳转B页面后返回 ---> 返回A页面会显示一部分白屏，随意滑动页面后，页面显示完整（android下没事）

分析：可能跟ios回弹效果，组件有关系，iOS WebView加载网页触摸白屏bug排查；附上VUE-ISSUES

解决方案：

方案三：（测试未起效果）

html, body { position: relative; margin: 0; padding: 0; width: 100%; height: 100%; } #app { position: absolute; left:0; top:0; width: 100%; height: 100%; background: #fff; overflow: scroll; -webkit-overflow-scrolling: touch; } #app > * { transform: translateZ(0px) -webkit-transform: translateZ(0px) }

方案二：（有效果但不适用于滚动加载）

在数据请求接口完成后，添加如下代码 // 模拟回到顶部 this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) // 举例 async getDeductionList () { try { const res = await this.post(url, {page: 1}) const { code, list } = res.data if (code === 200') { // 非滚动加载 this.deductionList = list this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) // 滚动加载 this.page++ this.deductionList = [...this.deductionList, ...list] if (this.page === 1) { this.$nextTick(() => { window.scrollTo(0, 1); window.scrollTo(0, 0); }) } } } catch (error) { console.log(error) } } // 滚动加载 scrollLoad () { this.getDeductionList() }

方案一：（使用中，简单粗暴）

History.scrollRestoration 定义：允许web应用程序在历史导航上显式地设置默认滚动恢复行为参数值： 1. auto 将恢复用户已滚动到的页面上的位置 2. manual 未还原页上的位置。用户必须手动滚动到该位置 // 通过路由守卫，判断设置manual router.beforeEach((to, from, next) => { if (history.scrollRestoration) { history.scrollRestoration = 'manual' } })

【本文地址】

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

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

今日新闻

推荐新闻