React中实现行等高的虚拟列表加载滚动

小灰灰学编程

已于 2024-02-01 10:58:49 修改

阅读量989

点赞数 9

CC 4.0 BY-SA版权

分类专栏： React.js JavaScript 文章标签： react.js 前端虚拟滚动虚拟列表

于 2024-01-23 18:35:33 首次发布

本文链接：https://blog.csdn.net/chen_ac/article/details/135779252

前言：当一个页面中需要接受接口返回的全部数据进行页面渲染时间，如果数据量比较庞大，前端在渲染dom的过程中需要花费时间，造成页面经常出现卡顿现象。

需求：通过虚拟加载，优化页面渲染速度

缺点：需要固定好每一行元素的高度

行元素不等高的虚拟列表实现方法

实现方法：

策略：设置可视区域高度、滚动高度、每个元素高度、初始展示的元素数据，通过监听滚动条滚动高度，根据高度重新获取需要展示的数据进行遍历

export default class Cp extends Component {
  constructor(props){
    super(props)
    this.state = {
      dataListTotal: 100,
      // 元素总数据
      dataList: new Array(100).fill().map((item,index)=>index+1),
      // 初始展示数据
      showDataList: new Array(20).fill().map((item,index)=>index+1),
      // 每个元素高度
      itemHeight: 20,
      // 可视区域高度
      viewHeight: 300
    }
  }

  handleScrollChange = (e)=>{
    const {itemHeight, viewHeight, dataLis