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