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 页面的滚动偏移量。
解决方案:
-
在页面离开时手动记录并恢复滚动位置(推荐):
- 在页面 A 的
onHide或beforeDestroy生命周期中,使用window.pageYOffset或document.documentElement.scrollTop记录当前滚动位置,并保存到全局状态(如 Vuex)或本地存储中。 - 在页面 A 的
onShow或onLoad中,读取保存的位置,并通过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 } } - 在页面 A 的

