uni-app 内嵌入h5页面,在ios手机上点击进入新页面,滚动到指定位置后返回,上一个页面也会滚动到相同位置

uni-app 内嵌入h5页面,在ios手机上点击进入新页面,滚动到指定位置后返回,上一个页面也会滚动到相同位置

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤:

  • 点击进入一个页面,滚动到指定位置,返回的时候,上一个页面也会滚动到这个页面的位置

预期结果:

  • 返回上一页面,还在跳转前位置

实际结果:

  • app内嵌入h5,在ios手机上,点击进入一个页面,滚动到指定位置,返回的时候,上一个页面也会滚动到这个页面的位置。
  • 比如说,跳转到一个页面,滚动了100px,返回的时候,上一个页面也滚动了100px;滚动到顶部,返回到上一页面,上一页面也回到了顶部,没有在跳转之前的位置。
  • 这个bug只在ios手机上有这个问题,安卓和电脑上没有问题。

更多关于uni-app 内嵌入h5页面,在ios手机上点击进入新页面,滚动到指定位置后返回,上一个页面也会滚动到相同位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 内嵌入h5页面,在ios手机上点击进入新页面,滚动到指定位置后返回,上一个页面也会滚动到相同位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是 iOS 系统中 WebView 内核(WKWebView)在处理页面导航时的历史记录滚动位置恢复机制导致的。当从 H5 页面 A 跳转到页面 B 并在 B 中滚动后,返回 A 时,iOS 会尝试恢复 A 页面在跳转前的滚动位置,但有时会错误地应用 B 页面的滚动偏移量。

解决方案:

  1. 在页面离开时手动记录并恢复滚动位置(推荐):

    • 在页面 A 的 onHidebeforeDestroy 生命周期中,使用 window.pageYOffsetdocument.documentElement.scrollTop 记录当前滚动位置,并保存到全局状态(如 Vuex)或本地存储中。
    • 在页面 A 的 onShowonLoad 中,读取保存的位置,并通过 window.scrollTo(0, savedPosition) 恢复到之前的位置。
    // 页面 A
    export default {
      data() {
        return {
          scrollTop: 0
        }
      },
      onShow() {
        // 恢复滚动位置
        if (this.scrollTop) {
          window.scrollTo(0, this.scrollTop)
        }
      },
      onHide() {
        // 记录滚动位置
        this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      }
    }
回到顶部