当前位置： 首页 > news >正文

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

news 2025/11/4 18:13:59

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

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

现在的方案：

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

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

重点来了！

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

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

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

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

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

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

->>>>>>渲染

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

相关文章：

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

目前的需求：当前组件向上滚动加载数据，dom加载完后，页面的元素位置不能发生变化 遇到的问题：加载完数据后，又把滚轮滚到之前记录的位置时，内容发生闪动 现在的方案： 加载数据之前记录整体滚动条…...

编程日记 2024/10/19 10:11:20

基于QT、ARM的智能停车管理系统+高分项目+源码

Parking-management-system 本系统基于QT、ARM开发板、Linux系统并对接百度AI 1.1 项目目的: 创建一个智能停车管理系统，能够停入车辆和取出车辆以及查询车辆停入停车场的状态并且计算车辆离开时收费情况。 1.2 项目意义: 实现停车场智能抬杆和智能收费系统&…...

编程日记 2024/10/19 10:09:17

1.6，unity动画Animator屏蔽某个部位，动画组合

动画组合 一边跑一边攻击 using System.Collections; using System.Collections.Generic; using UnityEngine;public class One : MonoBehaviour {private Animator anim;// Start is called before the first frame updatevoid Start(){anim GetComponent<Animator>();…...

编程日记 2024/10/19 10:08:14

发动机冷却系统排空气

发动机冷却系统排空气的几种常见方法 发动机冷却系统是汽车发动机的重要组成部分&#xff0c;它的主要作用是通过循环冷却液来吸收和散发发动机产生的热量&#xff0c;确保发动机在正常工作温度下运行。然而&#xff0c;在冷却系统的运行过程中&#xff0c;由于各种原因&#…...

编程日记 2024/10/19 10:07:13

三周精通FastAPI：1 第一步入门

FastAPI是一个非常棒的python web和api框架&#xff0c;准备用三周的时间“精通它” 学习流程参考FastAPI官网的用户教程&#xff1a;教程 - 用户指南 - FastAPI 学前提示 运行代码 所有代码片段都可以复制后直接使用&#xff08;它们实际上是经过测试的 Python 文件&#x…...

编程日记 2024/10/19 10:05:11

RestTemplate基本使用之HTTP实现GET请求和POST请求

一、GET请求实例 public static TianQi getTianQi(String city) {RestTemplate restTemplate new RestTemplate();HashMap res restTemplate.getForObject("http://www.tianqiapi.com/api/?versionv6&appid15118158&appsecretgVNnwva8&city" city, H…...

编程日记 2024/10/19 10:03:10

2024-10-18 问AI: [AI面试题] 神经网络有哪些不同类型？

文心一言 神经网络有多种不同类型&#xff0c;每种类型都有其特定的结构和应用场景。以下是一些主要的神经网络类型&#xff1a; 前馈神经网络&#xff08;FNN&#xff09;&#xff1a; 也称为全连接神经网络或感知器网络。由输入层、隐藏层和输出层组成&#xff0c;信息流是单…...

编程日记 2024/10/19 10:02:09

【开源免费】基于SpringBoot+Vue.JS课程作业管理系统（JAVA毕业设计）

本文项目编号 T 023 &#xff0c;文末自助获取源码 \color{red}{T023&#xff0c;文末自助获取源码} T023&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…...

编程日记 2024/10/19 10:01:08

jmeter中对于有中文内容的csv文件怎么保存

jmeter的功能很强大&#xff0c;但是细节处没把握好就得不到预期的结果。今天来讲讲有中文内容的csv文件的参数化使用中需要注意的事项。 对于有中文内容&#xff0c;涉及到编码格式&#xff0c;为了让jmeter能正确地读取csv文件中的中文&#xff0c;需要把文件转码为UTF-8BOM…...

编程日记 2024/10/19 9:54:02

Leetcode 921 Shortest Path in Binary Matrix

题意&#xff1a;求二维矩阵中往8个方向移动的话&#xff0c;从左上方到右下方移动的最短路径 https://leetcode.com/problems/shortest-path-in-binary-matrix/description/ 解答&#xff1a;bfs易得 class Solution { public:int shortestPathBinaryMatrix(vector<vecto…...

编程日记 2024/10/19 9:51:53

第二十二篇——菲欧几何：相对论的数学基础是什么？

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 对于几何的几个工具&#xff0c;让我再次感叹数学的伟大&#xff0c;逻辑…...

编程日记 2024/10/19 9:50:51

【AI整合包及教程】EchoMimic：开创数字人新时代，让静态图像“活”起来！

在数字化浪潮的推动下&#xff0c;人工智能技术正以前所未有的速度渗透到我们生活的方方面面。从智能家居到自动驾驶&#xff0c;从智能客服到医疗诊断&#xff0c;AI的触角无处不在。而如今&#xff0c;阿里巴巴旗下的蚂蚁集团再次引领潮流&#xff0c;宣布开源其革命性的数字…...

编程日记 2024/10/19 9:49:50

ArcGIS 最新底图服务地址

ArcGIS 最新底图服务地址 说明 先上地址&#xff1a; 地形图&#xff1a; https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer深色地形图&#xff1a;https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hi…...

编程日记 2024/10/19 9:44:45

【服务器部署】Docker部署小程序

一、下载Docker 安装之前&#xff0c;一定查看是否安装docker&#xff0c;如果有&#xff0c;卸载老版本 我是虚拟机装的Centos7&#xff0c;linux 3.10 内核&#xff0c;docker官方说至少3.8以上&#xff0c;建议3.10以上&#xff08;ubuntu下要linux内核3.8以上&#xff0c…...

编程日记 2024/10/19 9:42:43

三菱FX PLC设计一个电子钟程序实例

在这里介绍三菱FX系列PLC的计数器C的功能、结构&#xff0c;计数过程及工作原理。 功能&#xff1a; 对内部元件X、Y、M、S、T、C的信号进行计数。 结构&#xff1a; 线圈、触点、设定值寄存器、当前值寄存器。 地址编号&#xff1a; 字母C&#xff0b;&#xff08;…...

编程日记 2024/10/19 9:40:42

妇女、商业与法律（WBL）（1971-2023年）

WBL项目由世界银行开发&#xff0c;旨在通过分析时间序列数据&#xff0c;研究女性机会不平等与劳动市场动态之间的关系。该项目提供了1971年至2023年的190个经济体的面板数据&#xff0c;包括8个评分指标和35个数据点&#xff0c;涵盖了流动性、工作场所、薪酬、婚姻、父母身份…...

编程日记 2024/10/19 9:38:39

python 卸载、安装、virtualenv

前言 本文汇总下python环境的安装与卸载。 卸载python环境 卸载系统环境内的python环境 python_version_number3.10 sudo rm -rf /Library/Frameworks/Python.framework/Versions/${python_version_number}/ sudo rm -rf "/Applications/Python ${python_version_numb…...

编程日记 2024/10/19 9:37:38

ubuntu24.0离线安装Ollama和纯cpu版本以及对接Spring AI

文章目录 一.官网下载 0.3.13版本二.将文件包上传至ubuntu服务器三.下载安装脚本四.剔除GPU相关下载ROCM等&#xff0c;纯CPU运行脚本五.ollama常用命令六. 远程测试 七.对接spring AI 一.官网下载 0.3.13版本 ollama离线安装包下载地址 二.将文件包上传至ubuntu服务器 三.下…...

编程日记 2024/10/19 9:35:35

机器学习核心：监督学习与无监督学习

个人主页&#xff1a;chian-ocean 文章专栏 监督学习与无监督学习&#xff1a;深度解析 机器学习是现代人工智能的核心支柱&#xff0c;已广泛应用于从数据挖掘到计算机视觉再到自然语言处理的诸多领域。作为机器学习最主要的两大类型&#xff0c;监督学习&#xff08;Super…...

编程日记 2024/10/19 9:34:34

服务器托管的优缺点有哪些？

由于数字化程度不断提高&#xff0c;服务器在日常业务中发挥着越来越重要的作用。在大多数情况下&#xff0c;服务器由公司自己维护和管理。但对于一些公司来说&#xff0c;托管服务器(将这些任务交给专业人员)是更好的选择。 关于服务器的优缺点&#xff0c;有一点是明确的&am…...

编程日记 2024/10/19 9:33:33

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/10/17 17:55:51

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/11/3 16:32:18

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2025/10/28 7:44:13

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/10/29 23:40:59

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/9/12 6:14:24

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/9/14 20:44:53

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33