[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页面做逻辑判断

相关推荐
Senar13 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
前端snow2 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试2 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog3 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
fxshy4 小时前
ai聊天流式响应,阻塞式和流式响应 nginx遇到的坑
运维·javascript·nginx
这颗橘子不太甜QAQ4 小时前
Husky使用技巧
javascript·git·代码规范
장숙혜4 小时前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript