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


场景

【ios内嵌加载h5页面】A页面加载数据 ---> 跳转B页面后返回 ---> 返回A页面会显示一部分白屏,随意滑动页面后,页面显示完整(android下没事)

分析

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

解决方案

方案一:(使用中, 简单粗暴)

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

方案二:(有效果但不适用于滚动加载)

在数据请求接口完成后,添加如下代码
 
// 模拟回到顶部
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()
}

方案三:(测试未起效果)

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)
}
 

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - IOS内嵌H5页面,返回出现半截白屏问题及解决方案


Just do it.