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

news/2024/11/15 2:01:29/

文章目录

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

bug描述

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

原因

看一段A页面代码

					let that = thisthis.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.ppmy.cn/news/1230210.html

相关文章

RoCE、IB和TCP等网络的基本知识及差异对比

目前有三种RDMA网络,分别是Infiniband、RoCE(RDMA over Converged Ethernet)、iWARP。 其中,Infiniband是一种专为RDMA设计的网络,从硬件级别保证可靠传输 ,技术先进,但是成本高昂。 而RoCE 和 iWARP都是基于以太网的…

Arcgis 日常天坑问题2——三维场景不能不能加载kml图层,着手解决这个问题

arcgis js api官网介绍kml图层的地址: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-KMLLayer.html从文档里看到kml图层有诸多限制,比较重要的两点是: 1、不能在三维场景(SceneView&#xff09…

JVM中的 -Xms参数 设置 JVM 的初始堆大小

在 Java 虚拟机(JVM)的配置中,-Xms 是一个启动参数,用于设置 JVM 的初始堆大小(Initial Heap Size)。这个参数对于优化 Java 应用程序的性能非常重要,特别是在处理需要大量内存的应用程序时。 …

校园报修抢修小程序系统开发 物业小区报修预约上门维修工单系统

开发的功能模块有: 1.报修工单提交:学生、教职员工等可以使用小程序提交报修请求。这通常包括选择报修的问题类型(如水漏、电器故障、照明问题等),地点,报修联系人,联系电话等,并提供…

基于AVR单片机的便携式心电监测设备设计与实现

基于AVR单片机的便携式心电监测设备是一种常用的医疗设备,用于随时监测和记录人体的心电信号。本文将介绍便携式心电监测设备的设计原理和实现步骤,并提供相应的代码示例。 1. 设计概述 便携式心电监测设备是一种小巧、方便携带的设备,能够…

ClickHouse的 MaterializeMySQL引擎

1 概述 MySQL 的用户群体很大,为了能够增强数据的实时性,很多解决方案会利用 binlog 将数据写入到 ClickHouse。为了能够监听 binlog 事件,我们需要用到类似 canal 这样的第三方中间件,这无疑增加了系统的复杂度。 ClickHouse 20.…

使用k8s部署一个简单MySQL8服务,但是不能挂载

创建mysql的yaml文件 cat << eof > mysql.yaml apiVersion: apps/v1 # 通过kubectl explain deployment命令查看版本 kind: Deployment # 资源类型 metadata:name: mysql-deployment # 资源…

【2023云栖】陈守元:阿里云开源大数据产品年度发布

本文根据 2023 云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;陈守元 | 阿里云计算平台事业部开源大数据产品总监 演讲主题&#xff1a;阿里云开源大数据产品年度发布 随着云计算的不断发展&#xff0c;未来数据处理和应用的趋势将围绕C…