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

最新推荐文章于 2024-06-20 15:17:49 发布

置顶葬我以时光

最新推荐文章于 2024-06-20 15:17:49 发布

阅读量5.2k

点赞数 5

分类专栏： Vue JS 文章标签： javascript ios vue.js

本文链接：https://blog.csdn.net/jone_hui/article/details/115085256

版权

Vue 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

37 篇文章 0 订阅

订阅专栏

场景： 【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'
  }
})