uni-app h5 webview跳转后返回页面回到了顶部未记录滚动位置，h5安卓机复现

蹲蹲蹲蹲

在 uni-app 中，当你在 H5 页面中使用 webview 进行页面跳转后返回时，页面回到了顶部，且未记录滚动位置的问题，通常是由于浏览器的默认行为或 uni-app 的页面管理机制导致的。以下是一些可能的原因和解决方案：

1. 浏览器默认行为

浏览器的默认行为是在页面跳转后返回时不会自动记录滚动位置，尤其是对于动态加载的内容或单页应用（SPA）。

解决方案：

• 手动记录滚动位置： 在页面跳转前，手动记录当前页面的滚动位置，并在返回时恢复滚动位置。

  // 在跳转前记录滚动位置
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  uni.setStorageSync('scrollTop', scrollTop);
  
  // 在返回时恢复滚动位置
  onShow() {
    let scrollTop = uni.getStorageSync('scrollTop');
    if (scrollTop) {
      document.documentElement.scrollTop = scrollTop;
      document.body.scrollTop = scrollTop;
    }
  }
  

2. uni-app 页面管理机制

uni-app 的页面管理机制可能会导致页面返回时重新渲染，从而丢失滚动位置。

解决方案：

• 使用 keep-alive 缓存页面： 在 pages.json 中为页面配置 keep-alive，以缓存页面状态，包括滚动位置。

  {
    "path": "pages/yourPage/yourPage",
    "style": {
      "navigationBarTitleText": "Your Page",
      "enablePullDownRefresh": false,
      "app-plus": {
        "keepAlive": true
      }
    }
  }
  

• 手动管理页面缓存： 在 onLoad 和 onUnload 生命周期中手动管理页面缓存。

  onLoad() {
    if (this.$options.data().scrollTop) {
      document.documentElement.scrollTop = this.$options.data().scrollTop;
      document.body.scrollTop = this.$options.data().scrollTop;
    }
  },
  onUnload() {
    this.$options.data().scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  }
  

3. 安卓 WebView 的特定问题

安卓的 WebView 在某些情况下可能不会自动记录滚动位置，尤其是在动态加载内容或页面结构复杂的情况下。

解决方案：

• 强制刷新滚动位置： 在页面返回时，强制刷新滚动位置。

  onShow() {
    setTimeout(() => {
      let scrollTop = uni.getStorageSync('scrollTop');
      if (scrollTop) {
        document.documentElement.scrollTop = scrollTop;
        document.body.scrollTop = scrollTop;
      }
    }, 100); // 延迟确保页面渲染完成
  }
  

4. uni-app 的 scroll-view 组件

如果页面使用了 scroll-view 组件，滚动位置的管理需要额外注意。

解决方案：

• 记录 scroll-view 的滚动位置： 在跳转前记录 scroll-view 的滚动位置，并在返回时恢复。

  // 记录滚动位置
  let scrollTop = this.$refs.scrollView.scrollTop;
  uni.setStorageSync('scrollTop', scrollTop);
  
  // 恢复滚动位置
  onShow() {
    let scrollTop = uni.getStorageSync('scrollTop');
    if (scrollTop) {
      this.$refs.scrollView.scrollTop = scrollTop;
    }
  }