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

文章目录

  • bug描述
  • 原因
    • 分析:
  • 处理方案

bug描述

1.点击的A页面, 跳转到了B页面, 第一次页面正常显示
2.从B页面返回A页面
3.A页面不进行任何操作,再次点击A页面进入B页面
4.B页面自动滚动到底部.

原因

看一段A页面代码

					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中调用, 按理说和点击事件毫无关系

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

this.$nextTick(()=>{})

在这里插入图片描述
所以在路由跳转后, A页面的该回调函数被调用,此时的回调触发uni.pageScrollTo
就造成了在B页面诡异的滚动到底部问题

处理方案

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/168789.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OpenAI内斗剧情反转!微软力保ChatGPT之父回归?

美东时间11月17日下午,全球最热门的聊天机器人ChatGPT开发商OpenAI宣布了一项重磅管理层调整,Sam Altman将辞去CEO一职,并离开公司董事会。 Altman被踢出的消息除了让业界担心会影响该公司未来发展外,OpenAI另一位共同创办人暨总裁…

Linux学习第43天:Linux 多点电容触摸屏实验:难忘记第一次牵你手的温存

Linux版本号4.1.15 芯片I.MX6ULL 大叔学Linux 品人间百味 思文短情长 人都是性情中人,如果把学习当做自己的女朋友,对她细致入微、掏心掏肺、有耐心有恒心,终会修成正果。 而我们本节需要学习的电…

idea导入javaweb变成灰色

解决办法: 如果这时候src是蓝色,其余都是灰色文件夹,这时候要先把src文件夹变成灰色,否则之后会报错 src文件变成灰色方法,右键src,选择make direcory as 选择unmark 如果src不是蓝色,就是灰色&#xff0…

《C++PrimePlus》第8章 函数探幽

8.1 内联函数 使用内联函数 #include <iostream> using namespace std;inline double square(double x) { return x * x; }int main(){double a;a square(5.0);cout << "a " << a << endl;return 0; } 8.2 引用变量 将引用用作函数参数&…

软件数据采集使用代理IP的好处用哪些?

随着互联网的快速发展&#xff0c;越来越多的企业开始通过软件数据采集来获取目标客户的信息。然而&#xff0c;在进行数据采集的过程中&#xff0c;由于不同网站的访问规则和限制&#xff0c;经常会遇到一些问题。这时候&#xff0c;使用代理IP就可以很好地解决这些问题。下面…

自然语言处理:Transformer与GPT

Transformer和GPT&#xff08;Generative Pre-trained Transformer&#xff09;是深度学习和自然语言处理&#xff08;NLP&#xff09;领域的两个重要概念&#xff0c;它们之间存在密切的关系但也有明显的不同。 1 基本概念 1.1 Transformer基本概念 Transformer是一种深度学…

Kettle 简介

1. PDI结构简介 图 1‑1 PDI核心组件 Spoon是构建ETL Jobs和Transformations的工具。Spoon可以以拖拽的方式图形化设计&#xff0c;能够通过spoon调用专用的数据集成引擎或者集群。 Data Integration Server是一个专用的ETL Server&#xff0c;它的主要功能有&#xff1a; 功能…

数据库系统原理与实践 笔记 #9

文章目录 数据库系统原理与实践 笔记 #9存储管理与索引文件和记录的组织文件组织定长记录变长记录分槽的页结构文件中记录的组织顺序文件组织多表聚簇文件组织 数据库系统原理与实践 笔记 #9 存储管理与索引 文件和记录的组织 文件组织 数据库是以一系列文件的形式存储的。…

羊大师:冬季有哪些宅家必备?

羊大师&#xff1a;冬季有哪些宅家必备&#xff1f; 寒冷的冬天&#xff0c;宅在家里是舒适的选择。但是长时间的久坐却会让我们的身体变得僵硬&#xff0c;缺乏运动会导致身体机能下降。为了保持健康且舒服的状态&#xff0c;羊大师建议我们应该在家里进行一些简单又有效的运…

竞赛 题目:基于深度学习的人脸表情识别 - 卷积神经网络 竞赛项目 代码

文章目录 0 简介1 项目说明2 数据集介绍&#xff1a;3 思路分析及代码实现3.1 数据可视化3.2 数据分离3.3 数据可视化3.4 在pytorch下创建数据集3.4.1 创建data-label对照表3.4.2 重写Dataset类3.4.3 数据集的使用 4 网络模型搭建4.1 训练模型4.2 模型的保存与加载 5 相关源码6…

拜托!佛系点,你只是给社区打工而已

社区人到年底了各种要写的东西很烦啊&#xff01;突然看到这个&#xff0c;真的谢谢啊&#xff01; 家人们谁懂啊&#xff1f;&#xff01;&#xff01;平时写个东西起码两三天&#xff0c;试了一下这东西&#xff01;输入需求&#xff0c;一键生成&#xff0c;写好了&#xf…

vue年季度月联动筛选(el-cascader实现)

默认显示当年当季当月 <label class"font-weight">时间范围</label> <el-cascaderplaceholder"请选择":options"timeOption"filterableclearablechange-on-selectv-model"timeRange":props"{emitPath: true}&quo…

深眸科技以自研算法+先进硬件,创新打造AI视觉一体化解决方案

工业视觉软硬件一体化解决方案&#xff1a;是以工业AI视觉技术为核心&#xff0c;通过集成工业相机等视觉硬件、电控系统和机械系统等自动化设备以及算法平台等软件应用&#xff0c;为工业自动化降本增效提质。 深眸科技为进一步巩固和加强技术领先优势&#xff0c;创新打造的…

DBeaver连接本地MySQL

原文&#xff1a; DBeaver21.3.0安装与连接本地MySQL_dbeaver创建本地数据库_傅大胖的博客-CSDN博客 其他&#xff1a; mysql 的驱动下载地址&#xff1a; Central Repository: mysql/mysql-connector-java ​​​​​​​

一行代码搞定GPT4.0禁止升级开通

GPT4.0官方停止开通&#xff1f;看我一行代码就搞定他&#xff0c;又可以愉快的充值升级了 首先打开你的chatgpt的界面 正常点击这个升级是没有用的 这个界面中windows用户按键盘的F12打开开发者工具 mac电脑点菜单栏的开发–页面检查 然后输入这一串命令并回车 等待两…

预约按摩小程序功能及使用指南;

小程序预约按摩功能及使用指南&#xff1a; 1. 注册登录&#xff1a;用户可选择通过账号密码或微信一键登录&#xff0c;便捷注册&#xff0c;轻松管理预约服务。 2. 查找店铺&#xff1a;展示附近的按摩店铺信息&#xff0c;用户可根据需求选择合适的店铺进行预约。 3. 选择服…

SpringBoot2—运维实用篇

目录 打包与运行 • 程序打包与运行&#xff08;Windows版&#xff09; • 程序运行&#xff08;Linux版&#xff09; 配置高级 • 临时属性设置 • 配置文件分类 • 自定义配置文件 多环境开发 多环境开发&#xff08;yaml单一文件版&#xff09; 多环境开发&am…

划片机新手教程:从准备工作到注意事项全解析!

随着科技的飞速发展&#xff0c;划片机已成为半导体行业不可或缺的一部分。对于新手来说&#xff0c;如何正确操作划片机显得尤为重要。以下是新手操作划片机的步骤和建议。 一、准备工作 在开始操作划片机之前&#xff0c;首先需要准备好以下工具和材料&#xff1a; 1. 划片机…

大结局!OpenAI创始人奥特曼和 Greg Brockman 将加入微软!!!

持续48小时的OpenAI政变大戏终于迎来了大结局&#xff01; 微软堪称最大赢家&#x1f4a5;&#x1f4a5;&#x1f4a5; 微软CEO刚刚宣布&#xff1a; 我们仍然致力于与 OpenAI 的合作伙伴关系&#xff0c;并对我们的产品路线图、我们在 Microsoft Ignite 上宣布的一切继续创…