虚拟列表的实现思路(附带react代码)

简介: 虚拟列表的实现思路(附带react代码)

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


<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)即可

相关文章
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
24 0
|
3月前
|
前端开发 JavaScript 算法
深入理解前端框架:解析 React 的虚拟 DOM
虚拟 DOM 是 React 前端框架的核心概念之一。本文将深入探讨虚拟 DOM 的原理和应用,帮助读者更好地理解 React 框架的工作机制,并学习如何高效地使用虚拟 DOM 进行前端开发。
34 1
|
3月前
|
前端开发 JavaScript
使用 MobX 优化 React 代码
使用 MobX 优化 React 代码
34 0
|
4月前
|
JavaScript 前端开发
vue、react中虚拟的dom
vue、react中虚拟的dom
|
1月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。
|
3月前
|
JavaScript 前端开发 算法
说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系?
说说React中的虚拟dom?在虚拟dom计算的时候diff和key之间有什么关系?
20 0
|
3月前
|
前端开发
react 商品列表返回顶部
react 商品列表返回顶部
|
3月前
|
安全 前端开发 Swift
【代码混淆】react-native 代码混淆
【代码混淆】react-native 代码混淆
53 0
|
3月前
|
移动开发 安全 前端开发
【代码混淆】react-native 代码混淆
【代码混淆】react-native 代码混淆
19 0
|
3月前
|
存储 Dart 前端开发
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
56 1