程序员经验分享-hwhale

虚拟列表的实现思路（附带react代码）

2023-11-18

虚拟列表实现思路 —— 代码链接 

<div class="滚动容器">
        <div class="撑起列表正常高度"></div>
        <div class="列表容器">
                <div class="列表项"></div>
        </div>
</div>

1.【列表项】的高度确定。
2. 利用【滚动容器】的高度计算展示多少个【列表项】（向上取整）
3. 利用【滚动容器】的scrollTop即将展示的【列表项】的索引，结果+第2项结果 = 展示【列表项】下限
4. 【列表容器】使用绝对定位+transform：translate(开始索引*列表项高度，0 ) 保持在滚动容器展示的位置
5. 【滚动容器】onscroll 事件中执行（3、4）即可

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

javascript

前端

虚拟列表的实现思路（附带react代码） 的相关文章

  • 在 getElementsByClassName 的数组上使用 forEach 会导致“TypeError: undefined is not a function”

    In 我的 JSFiddle http jsfiddle net jer2 zcrh9 3 我只是想迭代一个元素数组 正如日志语句所证明的那样 该数组非空 然而 呼叫forEach给了我 不太有帮助 未捕获TypeError undefin

  • 优化 Web 应用程序开发策略

    如今 许多网络应用程序正在使用它们自己无法使用的 API 或代码 并且通常使用效率低下 我想到了一些谷歌地图混搭 对于 php asp 后端 HTML javascript 尤其是现在所有的 AJAX 存在许多潜在的瓶颈 问题 低效率和双重

  • 禁用浏览器状态栏文本

    背景 现代浏览器取消了经典的状态栏 而是在窗口底部绘制一个小工具提示 在悬停 焦点时显示链接目标 下面的屏幕截图说明了这种行为的示例 在我的例子中是不需要的 问题 有没有一种可移植的方法来禁用这些工具提示 在我的特殊情况下 我是否遗漏了这样

  • 在文件之间共享变量（没有全局变量）

    据我了解 使用创建的变量let在 Javascript 中不能是全局的 我thought这意味着该变量仅存在于该特定文件中 然而 当我做一个简单 人为的例子时 A js let a 5 B js console log a 索引 html

  • Firefox createMediaStreamDestination 使用 rtc 的错误？

    我通过 rtc 流式传输音频并想要静音和取消静音音频 这有效 但没有增益控制 function stream getUserMedia stream console log Access granted to audio video pee

  • 支持 Javascript 链式关系运算符吗？

    我只是尝试了一些 JS 核心原则 发现引擎评估链式关系运算符时不会抛出错误 相反 他们以一种我自己无法理解的方式进行评估 console log 1 lt 2 lt 3 lt 4 lt 5 true expected console log

  • Node JS 如何将图像和请求数据一起 POST 到另一个服务器/api

    我正在尝试将图像从 Node JS 应用程序发布到另一个 REST API 我在 Mongo DB 中有图像 作为二进制数组数据 由 Node JS 读取 然后应该发布到另一个 API 我面临的问题是如何将请求数据与图像一起发送 我有这个原

  • 使用 window.print 内容将网页下载为 pdf

    我想要一个链接 当单击该链接时 会自动开始下载网页的可打印版本 我正在使用Moodle 我想要的内容是完全相同的如果我使用 ctrl p 下载页面并保存为 pdf 或使用 a href Download web page a 我正是想要该内

  • 直接加载页面到锚标记

    当我加载 URL 中带有哈希标记的页面时 页面会加载 然后跳转到锚标记 有没有什么方法可以防止这种 跳转 要么直接将页面加载到锚标记 要么至少使滚动平滑 我在 Chrome 和 Firefox 中看到这个问题 但在 IE 中没有 如果你仍然

  • 如何隐藏 webpack-dev-server 日志？

    一旦 webpack dev server 启动 控制台将输出 wds Project is running at https 127 0 0 1 3002 wds webpack output is served from wds Con

  • “Backbone.js 视图”中的单击事件不起作用

    我尝试开始使用backbone js 但我发现当我不使用 body 作为视图的el时 该事件不起作用 这是代码 您可以将其另存为 html 文件并运行

  • 有没有办法覆盖 Google 路线服务缩放值？

    我使用下面的代码来获取两点之间的路线 directionsService route request function response status if status google maps DirectionsStatus OK di

  • 在我自己的文件夹结构中的 Sequelize 中的迁移

    我是新来的Sequelize我当前的项目要求我将它与迁移一起使用 我熟悉迁移的内容和方式 我来自Django背景 每个子应用程序在同一文件夹中都有模态 视图 api url 和迁移 我喜欢这个结构 并希望在我的 Nodejs 应用程序中保持

  • 如何使用Sinon监视导入的函数？

    假设我们想使用 Sinon 测试另一个函数是否调用了一个特定函数 fancyModule js export const fancyFunc gt console log fancyFunc export default const fan

  • Javascript 子字符串方法帮助

    长话短说 我正在开发一个 Web 应用程序并在其中使用 AJAX 我试图禁用点击时链接的默认操作 将哈希值附加到链接 然后从网址中删除 我遇到的问题是 虽然哈希值被相应地附加 但子字符串方法并没有提取 而是提取了它后面的字母 这是我的代码

  • 如何在android中使用webview明智地显示Html内容页面？

    您好 我创建了一个简单的应用程序来在 webview 中显示 html 页面 我使用 webview 并显示页面加载时间 如下所示 此后禁用滚动并使用下一个和上一个按钮来后退和前进包含 所以我的代码如下 首先onCreate显示添加webv

  • 查找数组中是否有任何项目符合条件

    我是 JavaScript 新手 现在 我有一个包含多个对象的数组 因此 我想迭代它 如果任何对象与条件匹配 那么我想返回一个值并停止该循环 我的 obj 数组就像 var obj type numberOfQuestions techno

  • 如何通过 JavaScript 函数在 HTML5 画布上绘制多边形

    我希望用户能够单击画布上的某个位置 多边形就会出现在上面 div class rounded div

  • Webpack 和外部库

    我正在尝试 webpack http webpack github io http webpack github io 看起来真的很不错 但我有点被困在这里了 假设我正在为库 f ex jQuery 使用 CDN 然后在我的代码中 我想要r

  • 使用 v-bind Vue.js 的多个变量

    我试图在以下代码中传递多个变量 div div 但我收到以下错误 Vue warn 无法生成渲染函数 SyntaxError 意外的标记 在 我尝试更换 with a 但我得到 Vue warn 无法生成渲染函数 SyntaxError I

随机推荐

  • Qt QProcess

    目录 概述 实 现 一 函数接口 二 执行命令 三 管 道 概述 本文介绍 在Linux环境下 使用Qt中的QProcess类执行shell命令并获取输出 头文件 include

  • 区块链数字签名详解

    有一点比较难以理解的答案就是 私钥加密公钥可以解密 公钥加密私钥可以解密 RSA的原理 两个大质数 p q 乘积 n 难以逆向求解 所以pq是对等的 公钥和私钥也是对等的 区块链 从数字货币到信用社会 读书笔记 这张图来自于新生大学的周兵

  • 【Vue项目实战】Vue3动画神操作！教你如何实现PPT一样的动画效果！

    文章目录 前言 一 Animate css是什么 二 安装和使用 1 安装 2 基本用法 3 JavaScript用法 三 动画制作 1 弹入动画 总结 前言 最近写界面的时候 发现一个前端组件很好玩 他就是鼎鼎大名的 Animate cs

  • 海康工业摄像头调用（linux基于python和opencv）

    1 下载官网客户端 其中包含SDK 官方网站 海康机器人 机器视觉 下载中心 安装deb文件 sudo dpkg i deb文件名 2 运行客户端 cd opt MVS bin MVS sh 如果连不上 看看是不是usb3 0的接口 3 调

  • ThinkPHP 日志信息泄露漏洞复现

    ThinkPHP 日志信息泄露漏洞复现 漏洞简介 ThinkPHP在开启DEBUG的情况下会在Runtime目录下生成日志 而且debug很多网站都没有关 ThinkPHP默认安装后 也会在Runtime目录下生成日志 THINKPHP3

  • 基于SSM 和 layui 的增删查改

    开发工具 IDEA 2021 WebStorm 2021 Mysql 8 0 开发环境 JDK 8 TomCat 8 5 81 apache maven 3 6 1 技术点 Spring SpringMVC Mybatis Mysql Ht

  • express使用简介

    框架搭建 1 安装脚手架 npm install g express generator 2 创建项目 express myapp 查看项目目录 可以知道启动文件www作用是提供http服务 express是一个全栈环境 所以有views

  • 维普期刊 瑞数5

    郑重声明 本项目的所有代码和相关文章 仅用于经验技术交流分享 禁止将相关技术应用到不正当途径 因为滥用技术产生的风险与本人无关 加载流程 url aHR0cDovL2xpYi5jcXZpcC5jb20vUWlrYW4vU2VhcmNoL0l

  • TCP/IP详解 卷1:协议 学习笔记 第十六章 BOOTP:引导程序协议

    一个无盘系统在不知道自身IP地址情况下 进行系统引导时能通过RARP协议获取它的IP地址 使用RARP会有两个问题 1 IP地址是返回的唯一结果 2 RARP使用链路层广播 RARP请求不会被路由器转发 每个实际网络必须设置一个RARP服务

  • leetcode算法面试题：打家劫舍问题

    题目 你是一个专业的小偷 计划偷窃沿街的房屋 每间房内都藏有一定的现金 影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统 如果两间相邻的房屋在同一晚上被小偷闯入 系统会自动报警 给定一个代表每个房屋存放金额的非负整数数组 计算你

  • 50个c/c++源代码网站

    C C 是最主要的编程语言 这里列出了50名优秀网站和网页清单 这些网站提供c c 源代码 这份清单提供了源代码的链接以及它们的小说明 我已尽力包括最佳的C C 源代码的网站 这不是一个完整的清单 您有建议可以联系我 我将欢迎您的建 议 以

  • Maven下载、安装和配置教程(2023年6月10日)

    Maven下载 安装和配置教程 2023年6月10日 一 下载安装包 二 安装 三 配置环境变量 系统是win10 四 验证是否安装成功 五 配置文件 六 idea里配置 一 下载安装包 链接 https pan baidu com s 1

  • 西部数据出现“WD SES Device USB Device”怎么办，而且说明书全是英文。

    您好 wd ses device driver这个驱动程序可以在baidu中输入关键词找到 什么驱动之家 驱动人生之类的专业驱动网站也都是有的 western digital的移动硬盘驱动程序安装步骤请见下图 转载于 https www c

  • glob.glob in python

    reference glob glob in python 功能 返回一个某一种文件夹下面的某一类型文件路径列表

  • Golang网络编程

    互联网协议介绍引入 1 物理层 Physical Layer 功能 物理层负责定义物理介质传输数据的方式和规范 它传输的是原始数据比特流 协议 Ethernet Wi Fi USB 光纤等 例子 将数据通过网线传输的过程类似于我们通过电话线

  • pytorch 使用BART模型进行中文自动摘要

    系列文章 如何从大型模型 BART fine tune一个小模型及代码实现 文本自动摘要评价方法 金字塔方法 pytorch 使用BART模型进行中文自动摘要 目录 系列文章 摘要 实现 数据准备 装载数据 预览数据 抽取部分模型 fine

  • Hutool工具类excel导出详细教程

    Hutool工具类excel导出 1 导入依赖

  • wxpython 用calendarctrl制作日历以及显示当前日期在statictext上

    calendar的日期显示 def beginEvent self event dlgb wx Dialog None id 1 title Calendar size 300 200 self datepick wx adv Calend

  • Leetcode 1解题思路以及代码整理

    Two Sum Description Given an array of integers return indices of the two numbers such that they add up to a specific tar

  • 虚拟列表的实现思路（附带react代码）

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算

热门标签