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

news2024/12/25 2:16:26

文章目录

  • 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.coloradmin.cn/o/1231513.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JAVA小游戏拼图

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 创建一个代码类 和一个运行类 代码如下: package heima; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import …

淘宝商品详情数据接口,淘宝商品优惠券数据接口,淘宝API接口

随着电商行业的快速发展,淘宝作为国内最大的电商平台之一,不断探索和创新,以满足不断变化的用户需求和商家需求。其中,淘宝API接口便是其创新的一个重要方面。本文将深入探讨淘宝API接口的作用、功能、优势以及使用方法&#xff0…

数字化文化的守护之星:十八数藏的非遗创新之道

在数字时代的浪潮中,十八数藏犹如一颗璀璨的守护之星,为传统文化注入了新的生命力。这个非遗创新项目以数字化为工具,以守护为使命,开辟了文化传承的新航道。 十八数藏是文化数字守护的引领者,通过数字技术&#xff0…

【开源】基于Vue.js的计算机机房作业管理系统的设计和实现

项目编号: S 017 ,文末获取源码。 \color{red}{项目编号:S017,文末获取源码。} 项目编号:S017,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课…

NX二次开发UF_CAM_ask_config_file 函数介绍

文章作者:里海 来源网站:里海NX二次开发3000例专栏 UF_CAM_ask_config_file Defined in: uf_cam.h int UF_CAM_ask_config_file(const char * * cam_config_filename ) overview 概述 This function provides the name of the CAM configuration fil…

使用Python实现几种底层技术的数据结构

使用Python实现几种底层技术的数据结构 数据结构(data structure)是带有结构特性的数据元素的集合,它研究的是数据的逻辑结构和数据的物理结构以及它们之间的相互关系,并对这种结构定义相适应的运算,设计出相应的算法,并确保经过这…

Labview中for循环“无法终止”问题?即使添加了条线接线端,达到终止条件后,仍在持续运行?

关键: 搞清楚“运行”和“连续运行”两种运行模式的区别。 出现题目中所述问题,大概率是因为代码运行在“连续运行“模式下。 可以通过添加 探针 的方式,加深理解!

BP神经网络原理与如何实现BP神经网络

本文部分图文来自《老饼讲解-BP神经网络》bp.bbbdata.com 目录 一、BP神经网络的背景生物学原理 二、BP神经网络模型 2.1 BP神经网络的结构 2.2 BP神经网络的激活函数 三、BP神经网络的误差函数 四、BP神经网络的训练 4.1 BP神经网络的训练流程 4.2 BP神经网络的训练流…

【并发编程】Synchronized的使用

📫作者简介:小明java问道之路,2022年度博客之星全国TOP3,专注于后端、中间件、计算机底层、架构设计演进与稳定性建设优化,文章内容兼具广度、深度、大厂技术方案,对待技术喜欢推理加验证,就职于…

华东理工李洪林课题组开发 Macformer,加速大环类药物发现

大环类化合物是指由 12 个以上原子组成的小分子或肽。相较于其他小分子化合物,大环类化合物在结构和性能上有着诸多优势,也因此被视为各类靶点的潜在治疗药物。 基于药物化学合成的大环类似物是大环类药物的一个主要来源。然而,由于合成方法…

力扣刷题-二叉树-完全二叉树的节点个数

222.完全二叉树的节点个数 给出一个完全二叉树,求出该树的节点个数。 示例 1: 输入:root [1,2,3,4,5,6] 输出:6 示例 2: 输入:root [] 输出:0 示例 3: 输入:root [1]…

拼图游游戏代码

一.创建新项目 二.插入图片 三.游戏的主界面 1.代码 package com.itheima.ui;import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.util.Random;import javax.swing…

【Spring进阶系列丨第三篇】Spring核心技术之 IoC 与 DI 实战案例

前言 在上一篇文章中,我们学习了IoC与DI的相关概念与原理,现在让我们 以HelloWorld为例,编写一个程序,让创建对象的工作由Spring帮助我们创建。 一同感受一下Spring框架带给我们开发的便捷性。 文章目录 前言一、编写Java类二、传…

IDEA调用接口超时,但Postman可成功调用接口

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码

基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于非洲秃鹫算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于非洲秃鹫优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

消息中间的应用场景

1、异步处理 比如用户在电商网站下单,下单完成后会给用户推送短信或邮件,发短信和邮件的过程就可以异步完成。因为下单付款是核心业务,发邮件和短信并不属于核心功能,并且可能耗时较长,所以针对这种业务场景可以选择先…

趣学python编程(六、关于蓝桥杯比赛)

蓝桥杯全国软件和信息技术专业人才大赛简称“蓝桥杯”,是由工业和信息化部人才交流中心举办的国内最大的信息技术竞赛。为促进中小学科技创新,提升中小学生逻辑思维,发现和培养面向未来的科技精英人才。 蓝桥杯介绍 蓝桥杯全国软件和信息技术…

Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)

📢专注于分享软件测试干货内容,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢交流讨论:欢迎加入我们一起学习!📢资源分享:耗时200小时精选的「软件测试」资…

贪吃蛇代码

一.准备 1.新建项目 2.放进照片 3.创建两个包放置图片类和入口类 二,游戏界面 package com.snake.view;import java.awt.Color; import java.awt.EventQueue; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; i…

前缀和(c++,超详细,含二维)

前缀和与差分 当给定一段整数序列a1,a2,a3,a4,a5…an; 每次让我们求一段区间的和,正常做法是for循环遍历区间起始点到结束点,进行求和计算,但是当询问次数很多并且区间很长的时候 比如,10^5 个询问和10^6区间长度,相…