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

文章目录

  • 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.mzph.cn/news/149639.shtml

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

相关文章

Zookeeper中的Watch机制的原理?

前言 Zookeeper是一个分布式协调组件,为分布式架构下的多个应用组件提供了顺序访问控制能力。它的数据存储采用了类似于文件系统的树形结构,以节点的方式来管理存储在Zookeeper上的数据 Zookeeper提供了一个Watch机制,可以让客户端感知到Zook…

第12周 E-R图

偏系统化的ER图例子还是不够,需要寻找 汇报时很多人的er图都有问题,重点是作为e的实体(方框表示)含义并没有搞懂

启动dubbo消费端过程提示No provider available for the service的问题定位与解决

文/朱季谦 某次在启动dubbo消费端时,发现无法从zookeeper注册中心获取到所依赖的消费者API,启动日志一直出现这样的异常提示 Failed to check the status of the service com.fte.zhu.api.testService. No provider available for the service com.fte…

【Vue】Vue3 超简单拖拽条动态修改容器宽度

demo 代码 const leftBoxWidth ref(200); // 默认宽度 const leftResize (e: MouseEvent) > {const startX e.clientX;const startWidth leftBoxWidth.value;const mouseMove (documentE: MouseEvent) > {// 80 是左侧菜单宽度leftBoxWidth.value startWidth docu…

卷积神经网络(VGG-16)海贼王人物识别

文章目录 前期工作1. 设置GPU(如果使用的是CPU可以忽略这步)我的环境: 2. 导入数据3. 查看数据 二、数据预处理1. 加载数据2. 可视化数据3. 再次检查数据4. 配置数据集5. 归一化 三、构建VGG-16网络1. 官方模型(已打包好&#xff…

笔记56:深度循环神经网络

本地笔记地址:D:\work_file\DeepLearning_Learning\03_个人笔记\3.循环神经网络\第9章:动手学深度学习~现代循环神经网络 a a a a a a a a

Cesium冷知识:判断cesium是否使用webgl2

老的Cesium.js,默认使用webgl1.0技术 现在默认使用webgl2.0技术 虽然有默认值,但是都可以通过相关参数来改变webgl版本 那么如何判断当前Cesium.js使用的是哪个webgl版本? 方案1: let isWebgl2viewer.scene.context.webgl2; //…

vue动态配置路由

文章目录 前言定义项目页面格式一、vite 配置动态路由新建 /router/utils.ts引入 /router/utils.ts 二、webpack 配置动态路由总结如有启发,可点赞收藏哟~ 前言 项目中动态配置路由可以减少路由配置时间,并可减少配置路由出现的一些奇奇怪怪的问题 路由…

vue将base64编码转为pdf方法

<iframe width"100%" height"100%" src"" frameborder"0" id"iframe"></iframe>使用方法: 直接调用就行 viewPdf(传入base64编码即可)//content是base64编码格式const viewPdf (content:any)> {const blob …

为什么选择B+树作为数据库索引结构?

背景 首先&#xff0c;来谈谈B树。为什么要使用B树&#xff1f;我们需要明白以下两个事实&#xff1a; 【事实1】 不同容量的存储器&#xff0c;访问速度差异悬殊。以磁盘和内存为例&#xff0c;访问磁盘的时间大概是ms级的&#xff0c;访问内存的时间大概是ns级的。有个形象…

抖音运营的必备10个工具,开启智能拓客引流新时代!

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 亲爱的知友们&#xff0c;您们是否对抖音运营有浓厚的兴趣和独特的见解&#xff1f;今天&#xff0c;我将为您介绍一些抖音运营必备的工具&#xff0c;帮助您在抖音上脱颖…

windows通过命令给文件夹或文件增加权限

给Demo001追加everyone权限 D:\cmd>cacls Demo001 /p everyone:f /e 处理的目录: D:\cmd\Demo001D:\cmd> 给Demo001下的所有文件追加everyone权限 D:\cmd>cacls Demo001 /p everyone:f /e /t 处理的目录: D:\cmd\Demo001 处理的目录: D:\cmd\Demo001\A 处理的文件:…

SpringMvc请求原理流程

springmvc是用户和服务沟通的桥梁&#xff0c;官网提供了springmvc的全面使用和解释&#xff1a;DispatcherServlet :: Spring Framework 流程 1.Tomcat启动 2.解析web.xml文件&#xff0c;根据servlet-class找到DispatcherServlet&#xff0c;根据init-param来获取spring的…

Mysql 千万级别查询优化

经常碰到慢查询报警&#xff0c;我们线上的慢sql阈值是1s&#xff0c;出现报警的表数据有 7000多万&#xff0c;经常出现报警的是一个group by的count查询&#xff0c;于是便开始着手优化这块&#xff0c;记录下自己优化过程中的心得 拿下面这张表举例&#xff0c;这是一张记录…

Android Native崩溃信息分析和 工具(addr2line和ndkstack)使用

这里以一个实际的crash案例未demo进行分析和讲解。针对native的崩溃信息。一般来讲&#xff0c;较快的方式是直接检索到backtrace&#xff0c;然后通过分析和使用工具addr2line和 ndk-stack等定位到出问题的地方。这里截取了一段 崩溃日志&#xff0c;具体如下&#xff1a; 01…

2311ddip1000不能从函数返回域引用

原文 以下程序无法用-previewdip1000编译: void main() safe {int[3] a [1, 2, 3];int[] slice;//好slice a[];scope ref getSlice() { return slice; }//错误:把对a局部变量的引用赋值给非域getSlice()getSlice() a[]; }getSlice应该可返回可安全地赋值给a[]的引用. 如常…

QtC++与QColumnView详解

介绍 在 Qt 中&#xff0c;QColumnView 是用于显示多列数据的控件&#xff0c;它提供了一种多列列表视图的方式&#xff0c;类似于文件资源管理器中的详细视图。QColumnView 是基于模型/视图架构的&#xff0c;通常与 QFileSystemModel 或自定义模型一起使用。 以下是关于 QC…

【文末送书】计算机网络 | IO多路转接技术 | poll/epoll详解

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和…

前端对用户名密码加密处理,后端解密

一. 正常表单提交如图&#xff0c;可以看见输入的用户名密码等 二. 使用crypto-js.min.js进行前端加密处理 js资源地址链接&#xff1a;https://pan.baidu.com/s/1kfQZ1SzP6DUz50D–g_ziQ 提取码&#xff1a;1234 前端代码 <script type"text/javascript" src&q…

C#8.0本质论第十四章--事件

C#8.0本质论第十四章–事件 委托本身是一个更大的模式(Pattern)的基本单位&#xff0c;称为Publish-Subscribe(发布-订阅)或Observer(观察者)。 14.1使用多播委托实现Publish-Subscribe模式 14.1.1定义订阅者方法 public class Cooler {public Cooler(float temperature){T…