🗒️原生JS编写虚拟滚动
2022-6-13
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

在开发项目的过程中,偶尔会遇到很大的数据,然后设计图上又是列表还不分页的情况。为此研究了下虚拟滚动的方案。虚拟滚动大致的思路是当你往下滚动,但最后一个计算的元素出现的时候,替换上面不见了的DOM元素,将它们从渲染的HTML中剔除,同理往上滚动,一个计算的元素出现在最上面的时候,表明需要加载上面的元素信息,并隐藏下面的DOM元素。演示地址

具体思路

  1. 页面结构,当然只需要一个DIV元素就可以。然后将手动生成DOM元素添加我们需要虚拟滚动的DOM元素中。
  1. 代码结构,利用JS的Class来创建一个对象,然后对象里做操作方法。这样把dom和JS操作分开,有利于代码的维护。
  1. 对象上属性的考虑需要哪些呢?
      • 需要虚拟滚动监听的dom元素 element
      • 需要虚拟滚动监听的dom的高度 height
      • 虚拟滚动列表的每一行高度 rowHeight,用来计算需要加载多少个数据
      • 新加载数据的个数 pageSize
      • 页面滚动加载新的dom元素,那么dom渲染需要时间,为此加一个缓存区域,提前渲染出需要的dom元素
      • 每一行渲染的回调函数 renderItem
      • 加载更多的回调函数 loadMore 那么对应的html编写就是
      目前主要一个对象需要这几个属性。对应代码的编写就如下
      构造函数中传入需要的对象属性值,然后构造函数检验值的正确性,并赋值
      这个时候来看看如何生成一个对象
      赋值操作弄好之后,还需要再每次创建新对象的时候就创建一个dom元素来包裹渲染rowItem
      还需要每次新建对象的的时候先渲染一批数据,然后还要再上面创建的包裹层中添加滚动监听。相当于虚拟dom的根节点。然后挂载到需要的dom节点上。
      这里就遇到了2个函数一个初始化加载函数,渲染第一次渲染的数据,第二个是防抖函数用来处理滚动的性能,第三个就是每次滚动到指定位置就渲染的数据的渲染函数
      最主要的函数操作是this.#toggleTopItems(direction); this.#toggleBottomItems(direction)这2个函数,他们主要就是替换消失在屏幕展示区域中的dom元素。是代码的核心。
  • Html
  • Javascript
  • Homebrew配置国内源vue3源码学习-6-调度器
    • Waline
    目录