Vue向上滚动加载数据时防止内容闪动

目前的需求:当前组件向上滚动加载数据,dom加载完后,页面的元素位置不能发生变化

遇到的问题:加载完数据后,又把滚轮滚到之前记录的位置时,内容发生闪动

现在的方案:

加载数据之前记录整体滚动条的高度,数据加载完之后把滚动条滚动到之前数据所在的位置;

方案是没有问题,但是特别不友好!dom加载完了之后滚动还是在最上方,页面就会出现内容的变化(显示新加载出来的数据),这时候再滚动到之前元素的位置还会再次出现内容的变化,(这里我尝试过禁用滚轮事件,但是内容撑开后滚轮还是会变)

重点来了!

这时候就需要使用到 requestAnimationFrame API, 这个API是跟着浏览器的刷新频率来计算的,大概就是一秒60次,它会在下一次渲染之前进行回调

举例说明:刷新之前滚轮高度是500,刷新完dom之后是1200

->>>>>>开始滚动获取数据

->>>>>>开始滚动条高度记录500

->>>>>>获取完数据更新完dom(此时浏览器还没有渲染,但是滚动条高度是1200)

->>>>>>执行requestAnimationFrame回调,把滚动条滚动到刷新之前元素的位置 1200 - 500

->>>>>>渲染

这时候就可以做到很平滑的加载数据!!!!

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

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

相关文章

004-按照指定功能模块名称分组

按照指定功能模块名称分组 一、说明1.现在有一个需求:2.具体做法 二、代码案例三、效果展示 一、说明 1.现在有一个需求: 需要把一个功能模块的几个功能点放在同一个文档目录下,这几个功能点分布在不同的 Controller 2.具体做法 需要把他…

登录前端笔记(二):vuex管理用户数据;跨域;axios封装;环境;请求响应拦截;权限;用户资料Vuex共享

一、Vuex登录流程之用户模块: 简言之:点击登录调用actions且得到token,把得到的token提交给mutations从而修改state里的数据。 原视频 (1)Vuex用户模块流程 组件页面里点击登录后,调用stores里的actions&…

智慧油田智能安全管控方案-AI助力油气田安全管控升级

在科技日新月异的今天,万物纵横科技凭借其前沿的智慧油田智能安全管控方案,正引领着油气田行业向智能化、高效化转型。该方案深度融合了AI视频智能分析与AIoT(物联网人工智能)技术,为采油场、油气场的设备运维、环境监…

查缺补漏----Cache命中率与缺失率的判断

第一类问题对比: 块大小16B,int型数据占4B,所以一个Cache块可以放4个数组,所以访问1个数组,后面3个数组的地址可以在同一个Cache块找到。 一个数组要访问2次,即读这个数组,然后给这个数组赋值&a…

傅里叶变换(FT)与快速傅里叶变换(FFT)的区别

傅里叶变换(Fourier Transform, FT)和快速傅里叶变换(Fast Fourier Transform, FFT)都是用于信号频域分析的工具,但它们在计算方式和效率上存在显著的区别。下面小编将详细说明傅里叶变换和快速傅里叶变换的定义、原理…

MATLAB图像重心计算

图像重心(或质心)计算是计算机视觉和图像处理领域 应用领域广泛:包括医疗,生物,动画,机器人等。 该文章通过灰度转换->二值化->质心计算 以下是代码中涉及的一些数学概念和公式: 灰度转换&#xff1a…

离岗睡岗预警系统 值班室离岗识别系统Python 结合 OpenCV 库

在众多工作场景中,存在着一些特殊岗位,这些岗位对于人员的专注度和警觉性有着极高的要求。然而,离岗睡岗现象却时有发生,给工作的正常开展和安全保障带来了严重的威胁。本文将深入探讨特殊岗位离岗睡岗的危害,以及如何…

音乐播放器-0.专栏介绍​

1.简介 本专栏使用Qt QWidget作为显示界面,你将会学习到以下内容: 1.大量ui美化的实例。 2.各种复杂ui布局。 3.常见显示效果实现。 4.大量QSS实例。 5.Qt音频播放,音乐歌词文件加载,展示。 6.播放器界面换肤。 相信学习了本专栏…

【汇编语言】寄存器(内存访问)(六)—— 栈

文章目录 前言正文结语 前言 📌 汇编语言是很多相关课程(如数据结构、操作系统、微机原理)的重要基础。但仅仅从课程的角度出发就太片面了,其实学习汇编语言可以深入理解计算机底层工作原理,提升代码效率,尤…

java集合进阶篇-《List集合》

个人主页→VON 收录专栏→java从入门到起飞 目录 ​编辑 一、前言 二、List集合简要概述 三、List集合主要函数的应用 四、List集合的遍历 五、思考 一、前言 List集合与Collection集合的相同之处还是挺多的,不过有些小细节又不太一样,其中有一个…

嵌入式学习-IO进程-Day04

嵌入式学习-IO进程-Day04 进程的函数接口 fork和Vfork 回收进程资源 wait waitpid 退出进程 获取进程号(getpid,getppid) 守护进程 守护进程的特点 创建步骤 exec函数族 线程 概念 线程和进程的区别 线程资源 线程函数接口 创建线程&#xff…

ASO优化手机游戏的秘密功能

在本文中,我们将尝试弄清楚手机游戏的 ASO 优化是否有任何特定功能。移动游戏在移动应用世界中占有特殊的地位,因为它们是最赚钱的细分市场。然而,今天,我们将关注的不是货币化,而是基础知识—文本和视觉优化、它们在游…

AI自动生成PPT哪个软件好?智能生成PPT不再熬夜做课件

大概这世上,都是职场牛马对“PPT”这三个字母的头痛反应最大吧! 是的,就连各个年级段的老师也是很头痛——愁着怎样能在排版整齐的情况下,将必考知识点都呈现在PPT每一张幻灯片页面里...... 近期打听到用人工智能生成ppt课件&am…

2024全国大数据与计算智能挑战赛火热报名中!

一年一度的 全国大数据与计算智能挑战赛震撼来袭! 报名速通: https://www.datafountain.cn/special/BDSSF2024 大数据与决策(国家级)实验室连续三年组织发起全国大数据与计算智能挑战赛,旨在深入挖掘大数据应用实践中亟…

基于模型预测控制(MPC)储能控制策略-多目标哈里斯鹰(MOHHO)算法的储能容量配置方法

目录 一、主要内容: 二、运行效果: 三、模型预测控制介绍: 四、多目标哈里斯鹰算法: 五、代码数据下载: 一、主要内容: 本研究旨在提出一种双层控制模型,结合模型预测控制(MPC…

2024年四非边缘鼠鼠计算机保研回忆(记录版 碎碎念)

Hi,大家好,我是半亩花海。写下这篇博客时已然是金秋十月,心中的石头终于落地,恍惚间百感交集。对于保研这条路,我处于摸着石头过河、冲击、随缘的这些状态。计算机保研向来比其他专业难,今年形势更是艰难。…

开发一个微信小程序要多少钱?

在当今数字化时代,微信小程序成为众多企业和个人拓展业务、提供服务的热门选择。那么,开发一个微信小程序究竟需要多少钱呢? 开发成本主要取决于多个因素。首先是功能需求的复杂程度。如果只是一个简单的信息展示小程序,功能仅限…

Pytest中fixture的scope详解

pytest作为Python技术栈下最主流的测试框架,功能极为强大和灵活。其中Fixture夹具是它的核心。而且pytest中对Fixture的作用范围也做了不同区分,能为我们利用fixture带来很好地灵活性。 下面我们就来了解下这里不同scope的作用 fixture的scope定义 首…

一图解千言,了解常见的流程图类型及其作用

在企业管理、软件研发过程中,经常会需要进行各种业务流程梳理,而流程图就是梳理业务时必要的手段,同时也是梳理的产出。但在不同的情况下适用的流程图又不尽相同。 本文我们就一起来总结一下8 种最常见的流程图类型 数据流程图 数据流程图&…

WordPress任推帮网盘拉新数据统计插件

任推邦是国内一线的APP推广项目分发和流量变现平台,隶属聚名科技集团(国家级高新技术企业、AAA重合同守信用企业,安徽百强企业),任推邦目前是阿里、字节、百度、迅雷、美团等品牌一级用户增长服务商,已入驻各类自媒体达…