[uni-app]记录APP端跳转页面自动滚动到底部的bug

文章目录

bug描述

1.点击的A页面, 跳转到了B页面, 第一次页面正常显示

2.从B页面返回A页面

3.A页面不进行任何操作,再次点击A页面进入B页面

4.B页面自动滚动到底部.

原因

看一段A页面代码

js 复制代码
					let that = this
					this.defaultScrollTop = uni.getStorageSync('detailScrollTop')
					this.$nextTick(() => {
						that.getInfoHeight();
						that.getPostion()
						clearTimeout(this.timer)
						this.timer = setTimeout(() => {
							if (that.courseInfo.unlock != 0 && that.courseInfo.catalog && that
								.courseInfo.catalog.length) {
								if (this.firstLoad) {
									that.switchClick(2)
								} else {
									if (!this.firstLoad) {
										console.log('jump to page')
										console.log(this.defaultScrollTop, '----')
										uni.pageScrollTo({
											scrollTop: this.defaultScrollTop,
											duration: 150
										})
									}
								}
								this.firstLoad = false
							}
						}, 300)
					})

分析:

此处代码仅在 onLoad中调用, 按理说和点击事件毫无关系

最后排查发现 问题出在事件循环上

js 复制代码
this.$nextTick(()=>{})

所以在路由跳转后, A页面的该回调函数被调用,此时的回调触发uni.pageScrollTo

就造成了在B页面诡异的滚动到底部问题

处理方案

移除 jsthis.$nextTick(()=>{}) 或者在A页面做逻辑判断

相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom7 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室8 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室8 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀11 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js